.article-preview {
   &__wrapper {
      margin-bottom: 60px;

      @include _Tablet {
         margin-bottom: 70px;
      }

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

   &__bredcrumbs {
      margin-bottom: 60px;

      @include _Tablet {
         margin-bottom: 80px;
      }

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

   &__body {
      display: grid;
      gap: 24px;

      @include _Tablet {
         gap: 40px;
      }

      @include _XSDesktop {
         grid-template-columns: 1fr 1fr;
         gap: 80px;
      }
      @include _Desktop {
         grid-template-columns: 1fr 1.1fr;
         gap: 80px;
      }
      @include _LDesktop {
         grid-template-columns: 1fr 1.2fr;
         gap: 180px;
      }
   }

   &__image {
      aspect-ratio: 17/10;

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

      @include _Tablet {
         aspect-ratio: 69/34;
      }

      @include _XSDesktop {
         aspect-ratio: 43/28;
      }
      @include _Desktop {
         aspect-ratio: 55/38;
      }
      @include _HDesktop {
         aspect-ratio: 91/60;
      }
   }

   &__content {
      @include _Tablet {
         align-self: center;
      }

      @include _XSDesktop {
      }
      @include _Desktop {
      }
      @include _LDesktop {
      }
      @include _HDesktop {
      }
   }

   &__tag {
      background: #ffffff1a;
      display: inline-block;
      padding: 4px 8px;
      border-radius: 2.4px;
      margin-bottom: 24px;
      font-weight: 500;
      font-size: rem(14);
      line-height: 1.4;
      text-transform: uppercase;

      @include _Tablet {
         font-size: rem(10);
         margin-bottom: 32px;
         padding: 7px 8px;
      }

      @include _XSDesktop {
         font-size: rem(10);
      }
      @include _Desktop {
         font-size: rem(12);
         padding: 7px 8px;
      }
      @include _HDesktop {
         margin-bottom: 60px;
         font-size: rem(16);
         padding: 8px 16px;
      }
   }

   &__title {
      margin-bottom: 16px;
      font-size: rem(24);
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: -2%;

      @include _Tablet {
         font-size: rem(40);
         letter-spacing: -4%;
      }

      @include _XSDesktop {
         font-size: rem(24);
         letter-spacing: 0%;
         line-height: 1.3;
      }

      @include _Desktop {
         font-size: rem(40);
         line-height: 1.2;
         letter-spacing: -4%;
      }
      @include _HDesktop {
         font-size: rem(64);
         line-height: 1.2;
         letter-spacing: -4%;
      }
   }

   &__descr {
      color: #ffffff;
      margin-bottom: 24px;
      font-size: rem(16);
      line-height: 1.4;

      @include _Tablet {
         font-size: rem(20);
         margin-bottom: 32px;
      }

      @include _XSDesktop {
         margin-bottom: 32px;
      }
      @include _Desktop {
         font-size: rem(20);
         max-width: 430px;
      }
      @include _HDesktop {
         margin-bottom: 60px;
         font-size: rem(24);
         max-width: 640px;
      }
   }

   &__date {
   }
}
