.article-card {
   background-color: #000000;
   display: flex;
   flex-direction: column;

   &__cover {
      aspect-ratio: 34/23;

      img {
         display: block;
         object-fit: cover;
         height: 100%;
         transition: transform 2s ease;
      }

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

      @include _XSDesktop {
         aspect-ratio: 10/7;
      }
      @include _Desktop {
         aspect-ratio: 36/25;
      }
   }

   &__content {
      display: flex;
      flex-direction: column;
      padding: 16px;
      height: 100%;

      @include _Desktop {
         padding: 24px;
      }
      @include _LDesktop {
         padding: 32px;
      }
   }

   &__title {
      margin-bottom: 8px;
      font-weight: 700;
      font-size: rem(18);
      line-height: 1.4;
      text-transform: uppercase;

      @include _XSDesktop {
         margin-bottom: 16px;
         line-height: 1.2;
         font-size: rem(20);
      }
      @include _Desktop {
         margin-bottom: 8px;
         font-size: rem(16);
      }
      @include _HDesktop {
         margin-bottom: 16px;
         font-size: rem(24);
      }
   }

   &__descr {
      margin-bottom: 24px;
      color: #ffffff;
      text-wrap: balance;

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

   &__tags {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;

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

   &__tag {
      color: #ffffff99;
      font-size: rem(12);
      border-radius: 3px;
      background: #ffffff1a;
      padding: 4px 8px;

      @include _XSDesktop {
         font-size: rem(10);
      }
      @include _Desktop {
         padding: 1px 8px;
      }
      @include _HDesktop {
         padding: 5px 16px;
         font-size: rem(12);
      }
   }

   &__date {
      margin-top: auto;

      @include _HDesktop {
         gap: 8px;
      }

      .date__icon {
         flex: 0 0 20px;
         height: 20px;

         @include _XSDesktop {
            flex: 0 0 13px;
            height: 13px;
         }
         @include _HDesktop {
            flex: 0 0 16px;
            height: 16px;
         }
      }
   }
}
