@import (reference) '../../common/variables.less';

.article {
  margin-bottom: 100px;

  &-title {
    text-align: left;
    margin-bottom: 30px;
  }

  &-description {
    margin-top: 24px;

    @media @lg-xl {
      width: 50%;
    }
  }

  &-heading {
    color: @landing-blue;
  }

  &-content {
    display: block;
    margin-bottom: 30px;

    @media (min-width: 500px) {
      display: grid;
      margin-bottom: 30px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
        'first first'
        'second third'
        'fourth fifth';
      grid-gap: 10px;
    }

    @media @md-xl {
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas:
        'first second third'
        'first fourth fifth';
      margin-bottom: 50px;
    }
  }

  &-link {
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;

    border: 2px solid @light-blue-bg;
    border-radius: 10px;
    padding: 10px;

    &:hover {
      text-decoration: none;
      color: inherit;
      background: @light-blue-bg;
    }

    @media (min-width: 500px) {
      height: 100%;
    }

    @media @md-xl {
      padding: 20px;
      height: 100%;
    }
  }

  &-item {
    margin-bottom: 1rem;
    @media @md-xl {
      margin-bottom: 0;
    }

    &-title {
      font-weight: 500;
      font-size: 20px;
    }

    &-description {
      font-size: 16px;
      line-height: 24px;
      margin-top: 10px;

      // 4 lines of text
      max-height: 24px * 4;
      overflow: hidden;

      @supports (-webkit-line-clamp: 4) {
        // Modern truncation
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-clamp: 4;
        // stylelint-disable-next-line property-no-unknown
        box-orient: vertical;
      }
    }

    &-date {
      font-size: 0.875rem;
      opacity: 0.6;
      height: 1.5rem;
      color: inherit;
      margin: 20px 0;
      text-align: start;
    }

    &-img {
      margin-bottom: 1rem;

      @media @sm {
        margin-bottom: 0;

        &-container {
          width: 40%;
          float: left;
          margin-right: 1rem;
        }
      }

      &.esl-image {
        height: auto;
      }
    }
  }

  &-1 {
    grid-area: first;
  }
  &-2 {
    grid-area: second;
  }
  &-3 {
    grid-area: third;
  }
  &-4 {
    grid-area: fourth;
  }
  &-5 {
    grid-area: fifth;
  }

  &-btn {
    display: flex;
    justify-content: center;
  }
}
