.article-lg {
   display: flex;
   justify-content: space-between;
   margin-bottom: 40px;

   .article-img {
      width: 437px;
      margin-right: 110px;
   }

   a {
      @include underline-never;
   }
}

.article-text {
   flex: 1;
   align-self: center;

   .title {
      margin-bottom: 10px;

      a {
         @include underline-hover;

         color: $text-dark;
      }
   }

   .perex {
      line-height: $line-height-lg;
      margin-bottom: 15px;
   }
}

@media screen and (min-width: $lg) {
   .article-lg-full {
      margin-bottom: 100px;
      position: relative;

      &::after {
         content: '';
         border-top: 1px solid $border-color;
         position: absolute;
         left: calc($grid-gutter-width / 2);
         right: calc($grid-gutter-width / 2);
         bottom: -50px;
      }

      .article-img {
         width: 665px;
      }

      .article-text {
         .title {
            font-size: $font-size-h1;
         }
      }
   }
}

@media screen and (max-width: $xxl - 1) {
   .article-lg {
      .article-img {
         width: 340px;
         margin-right: 40px;
      }
   }

   .article-lg-full {
      .article-img {
         width: 465px;
      }
   }
}

@media screen and (max-width: $xl - 1) {
   .article-lg {
      .article-img {
         width: calc(50% - 20px);
         margin-right: 20px;
      }
   }

   .article-text {
      .article-data {
         span {
            + span::before {
               margin: 0 10px;
            }
         }
      }
   }
}

@media screen and (max-width: $lg - 1) {
   .article-lg {
      margin-bottom: 30px;
   }

   .article-text {
      .title {
         font-size: $font-size-h4;
      }

      .article-data {
         margin-bottom: 10px;
         font-size: $font-size-smaller;
      }

      .perex {
         font-size: 12px;
      }
   }
}

@media screen and (max-width: $md - 1) {
   .article-lg {
      flex-direction: column;

      .article-img {
         width: 100%;
      }
   }

   .article-text {
      margin-top: -18px;
      padding: 0 10px;

      .perex {
         overflow: hidden;
         -webkit-line-clamp: 2;
         display: -webkit-box;
         -webkit-box-orient: vertical;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .article-lg {
      width: calc(100% + $grid-gutter-width);
      margin: 0 calc(-1 * $grid-gutter-width / 2) 30px;
   }
}
