Hero Innerpage

.hero--innerpage {
   position: relative;
   background-color: $c-black;
   z-index: 5;

   @include mediaWQuery($media-query-m) {
      margin-bottom: 8rem;
   }

   .container {
      position: relative;

      > * {
         @include mediaWQuery($media-query-m) {
            display: inline-block;
            width: 49%;
            vertical-align: middle;
         }
      }

      @supports (display: grid) {
         > * {
            display: block;
            width: 100%;
         }

         display: flex;
         flex-direction: column-reverse;

         @include mediaWQuery($media-query-m) {
            display: grid;
            grid-gap: $grid-gap-l;
            grid-template-columns: 1fr 1fr;
            align-items: center;
         }
      }

      @include mediaWQuery($media-query-m) {
         padding-top: $margin-l;
         padding-bottom: $margin-l;
      }

      @include mediaWQuery($media-query-l) {
         padding-top: $margin-l*1.5;
      }

      .hero--innerpage__content {
         position: relative;
         z-index: 10;
         padding: $margin-m 0;

         &, a { color: $c-white }

         h1 {
            margin: 0;
            line-height: $font-lineheight-s;
         }

         .breadcrumb {
            margin: 0;
            > ol > li:not(.item-lest)::after {
               background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='fas' data-icon='chevron-right' class='svg-inline--fa fa-chevron-right fa-w-10' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23fff' d='M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
            }

            a { color: $c-white!important }
         }

         @supports (display: flex) {
            display: flex;
            flex-direction: column-reverse;
         }
      }

      .hero--innerpage__thumbnail {
         margin: 0 -1rem;
         width: calc(100% + 2rem);

         @include mediaWQuery($media-query-m) {
            margin: 0;
            width: 100%;
            margin-bottom: -6rem;
         }

         .outer--box {
            height: 0;
            padding-top: 60%;
            position: relative;

            > img {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               object-fit: cover;
            }
         }

         @include mediaWQuery($media-query-m) {
            box-shadow: $box-shadow-l;
         }

         img {
            width: 100%;
            height: 100%;
            object-fit: cover; 
         }

         @include mediaWQuery($media-query-m) {
            position: relative;
            width: auto;
            height: auto;
            border-radius: 32px;

            .outer--box {
               @include aspect-ratio(16, 9);
               overflow: hidden;
               margin-left: -1rem;
               margin-right: -1rem;

               @include mediaWQuery($media-query-m) {
                  border-radius: 0 $border-radius-card $border-radius-card $border-radius-card;
                  margin: 0;
               }

               .inner-box {
                  > img {
                     width: 100%;
                     height: 100%;
                     object-fit: cover;
                  }
               }
            }
         }
      }
   }
}