.adv-main {
   &__body {
      display: grid;
      gap: 20px;
      @include _Tablet {
         grid-template-columns: repeat(2, 1fr);
      }

      @include _XSDesktop {
         gap: 24px;
      }

      @include _Desktop {
         gap: 20px;
      }
      @include _HDesktop {
         gap: 15px;
      }
   }

   &__item {
      position: relative;
      padding: 24px;
      aspect-ratio: 17/15;

      @include _Tablet {
         aspect-ratio: 67/51;
      }

      @include _XSDesktop {
         aspect-ratio: 23/10;
      }

      @include _Desktop {
         aspect-ratio: 5/2;
      }

      @include _HDesktop {
         aspect-ratio: 13/5;
      }
   }

   &__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;

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

   &__content {
      max-width: 90%;
      text-wrap: balance;
      position: relative;
      z-index: 1;

      @include _Tablet {
         max-width: 85%;
      }

      @include _XSDesktop {
         max-width: 55%;
         position: absolute;
         bottom: 24px;
         left: 24px;
      }

      @include _HDesktop {
         max-width: 45%;
         bottom: 40px;
         left: 40px;
      }
   }

   &__title {
      margin-bottom: 8px;
      font-size: rem(16);
      text-transform: uppercase;
      color: #ffffff;
      font-weight: 700;

      @include _Tablet {
         font-size: rem(14);
         line-height: 1.5;
      }

      @include _Desktop {
         font-size: rem(16);
         line-height: 1.2;
      }

      @include _HDesktop {
         font-size: rem(24);
         margin-bottom: 24px;
      }
   }

   &__text {
      font-size: rem(14);
      color: #ffffff99;
   }
}
