$article-title-font-weight: 400 !default;
$article-lg-title-font-size: $font-size-h3 !default;
$article-sm-title-font-size: $font-size-h4 !default;
$article-title-font-size-resp: $font-size-h4 !default;

@import "@css[shared]/components/articles/_article-list";

.articles-row {
   display: flex;
   flex-wrap: wrap;
   margin: 0 calc(-#{$grid-gutter-width} * 2);
}

.article {
   margin: $grid-gutter-width;

   .img {
      aspect-ratio: 1.42;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      @include haf {
         img {
            transform: scale(1.05);
            transition: transform $transition-speed;
         }
      }
   }

   .content {
      width: 100%;
   }

   .title {
      line-height: 1.2;
      font-weight: $article-title-font-weight;
      margin-bottom: 5px;
   }

   .descr {
      line-height: $line-height-sm;
      margin-bottom: 30px;
   }

   .data {
      font-size: $font-size-smaller;
      color: $text-muted;
   }

   &.article-lg {
      align-items: center;
      margin-bottom: calc(#{$grid-gutter-width} * 2);
      width: calc(100% - #{$grid-gutter-width} * 2);

      .title {
         font-size: $article-lg-title-font-size;
      }

      .img {
         max-height: 524px;
      }

      .content {
         padding-left: 80px;
         padding-top: 0;
         max-width: 580px;
      }
   }

   &.article-sm {
      flex-direction: column;
      width: calc(100% / 3 - #{$grid-gutter-width} * 2);

      .content {
         padding: 15px 13px 0;
      }

      .title {
         font-size: $article-sm-title-font-size;
      }

      .img {
         max-height: 345px;
      }

      img {
         width: 100%;
      }
   }

   @media screen and (max-width: $md - 1) {
      .descr {
         display: none;
      }

      .data {
         margin-bottom: 10px;
      }

      &.article-lg,
      &.article-sm {
         margin: 0;
         width: 100%;

         .content {
            padding: 15px 10px;
         }

         .title {
            font-size: $article-title-font-size-resp;
         }

         .img {
            max-height: unset;
         }
      }
   }
}

.articles-sm-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   margin-bottom: 60px;

   > * {
      flex: 100%;
   }

   @media screen and (max-width: $md - 1) {
      .articles-sm-side {
         display: none;
      }
   }

   > .btn {
      max-width: 340px;
      width: 100%;

      @media screen and (max-width: $md - 1) {
         display: block;
         margin: 20px auto;
      }
   }

   @media screen and (max-width: $md - 1) {
      .articles-sm-col .article {
         &:nth-child(2),
         &:nth-child(3) {
            display: none;
         }
      }
   }
}

.articles-sm-col {
   display: flex;
   margin-bottom: 30px;

   @media screen and (max-width: $md - 1) {
      margin-bottom: 0;
   }
}
