@import "../../../styles/mixins";
@import "../../../styles/variables";

.allInsightArticle {
  padding: 6.25rem 0 7.25rem 0;

  .moreButton {
    text-align: center;
    padding-top: 3.75rem;

    span {
      @include h5();
      color: $blue;
    }

    i {
      transform: rotate(90deg);
      font-size: $font-h3;
    }
  }
}

.articles {
  margin-top: -1rem;

  &:last-child {
    margin-bottom: -1rem;
  }
}

.articleItem {
  color: $F1;
  padding-top: 1rem;
  padding-bottom: 1rem;

  .articleCard {
    @include card;
    height: 100%;

    .image {
      height: 45.5%;

      img {
        object-fit: cover;
        border-top-left-radius: $radius;
        border-top-right-radius: $radius;
      }
    }

    .content {
      padding: $hl-8 $hl-7 $hl-7;

      p {
        @include p2();
        color: $blue;
      }

      h4 {
        @include h4();
        margin: 0.5rem 0 1rem 0;
      }

      .article-description {
        @include p1();
        @include multi-line-ellipsis(5);
        color: $font-color-6;
      }
    }
  }
}

@media screen and (max-width: $desktop) {
  .articleCard {
    &:hover {
      transform: none;
    }
  }

  .articleItem {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .articles {
    margin-top: -0.5rem;

    &:last-child {
      margin-bottom: -0.5rem;
    }
  }
}