.text-image {
   &__wrapper {
   }

   &__subtitle {
      margin-bottom: 16px;
      color: cl("accent");

      @include _Tablet {
         margin-bottom: 24px;
         max-width: 80%;
      }

      @include _XSDesktop {
         margin-bottom: 32px;
      }

      @include _Desktop {
         margin-bottom: 24px;
      }

      @include _HDesktop {
         margin-bottom: 32px;
      }
   }

   &__h2 {
      margin-bottom: 32px;

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

      @include _XSDesktop {
         max-width: 70%;
      }
      @include _Desktop {
         max-width: 50%;
      }

      @include _HDesktop {
         margin-bottom: 60px;
      }
   }

   &__body {
      display: grid;

      gap: 24px;

      @include _XSDesktop {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
         align-items: center;
      }

      @include _Desktop {
         gap: 20px;
      }

      @include _HDesktop {
         gap: 44px;
         grid-template-columns: 48% auto;
      }
   }

   // Модификатор: "Изображение слева?" в ACF.
   // По умолчанию (без модификатора) — карточки слева, слайдер справа.
   &--image-left &__body {
      @include _XSDesktop {
         .text-image__cards {
            order: 2;
         }

         .text-image__slider {
            order: 1;
         }
      }
   }

   &__cards {
      border: 0.84px solid #ffffff1a;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
   }

   &__card {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 24px;
      padding: 32px;
      align-items: start;
      &:not(:last-child) {
         border-bottom: 0.84px solid #ffffff1a;
      }

      @include _Tablet {
         padding: 40px 32px;
         flex-direction: row;
      }

      @include _XSDesktop {
         align-items: center;
      }

      @include _Desktop {
         padding: 32px 40px;
         gap: 40px;
      }

      @include _HDesktop {
         gap: 90px;
      }
   }

   &__card-icon {
      flex: 0 0 40px;
      height: 40px;

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

      @include _Desktop {
         flex: 0 0 48px;
         height: 48px;
      }

      @include _HDesktop {
         flex: 0 0 64px;
         height: 64px;
      }
   }

   &__card-content {
      @include _Tablet {
         max-width: 86%;
      }

      @include _XSDesktop {
         max-width: 71%;
      }
      @include _Desktop {
         max-width: 77%;
      }
   }

   &__card-title {
      margin-bottom: 24px;

      @include _Desktop {
         margin-bottom: 32px;
      }
   }

   &__card-text {
      color: #ffffff99;
   }

   &__slider {
      min-width: 0;
      position: relative;
      aspect-ratio: 17/16;

      @include _Tablet {
         aspect-ratio: 23/16;
      }

      @include _XSDesktop {
         aspect-ratio: auto;
         height: 473px;
      }

      @include _Desktop {
         height: 485px;
      }
      @include _HDesktop {
         height: 634px;
      }
   }
}
