.article-thumbs {
  @extend %container;

  padding-top: 70px;
  padding-bottom: 50px;

  @include media('tablet-m') {
    padding-top: 40px;
  }

  .button-link {
    margin-top: auto;
    margin-left: 0;
    line-height: 27px;

    span {
      &.button-link__primary-text {
        display: inline;
      }

      &:not(.button-link__primary-text) {
        display: none;
      }
    }
  }

  .page-heading {
    display: none;
  }
}

.article-thumbs__list {
  @include reset-list;

  display: flex;
  min-height: 170px;
  gap: 42px;
  list-style: none;

  @include media('tablet-m') {
    gap: 30px;
  }

  @include media('tablet-s') {
    gap: 20px;
  }
}

.article-thumbs__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc((100% - 42px * 2) / 3);

  &:not(:nth-child(n+3)) {
    border-right: 1px solid $color-pale-grey;
    padding-right: 42px;

    @include media('tablet-m') {
      padding-right: 30px;
    }
  }

  @include media('tablet-m') {
    width: calc((100% - 30px) / 2);

    &:last-of-type {
      display: none;
    }
  }

  @include media('tablet-s') {
    &:first-of-type {
      margin-top: 0;
    }
  }

  h3 {
    margin: 0 0 32px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #222;
    flex: 1;
  }

  .date {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    color: #979ea1;

    @include media("tablet-s") {
      margin-right: 10px;
    }

    .icon {
      width: 24px;
      height: 24px;
    }

    span {
      font-size: 16px;
      font-weight: 400;
      line-height: 19px;
    }
  }

  .button-new {
    @include media('tablet-s') {
      width: max-content;
    }
  }
}

@include media('tablet-s') {
  .article-thumbs {

    .page-heading {
      display: block;
      margin-bottom: 0;
      font-size: 18px;
      line-height: 1;

      &::before {
        left: 0;
        right: 0;
        height: 4px;
        background-image: repeating-linear-gradient(135deg, transparent 0, transparent 2px, #d3d3d3 2px, #d3d3d3 3px);
        background-size: 3px 4px;
      }
    }

    .button-link {
      min-width: unset;
      padding: 0;
      font-size: 14px;
      line-height: 14px;
      font-weight: 300;
      text-transform: none;
      border: none;

      &.button-link--pale:hover {
        background-color: transparent;
      }

      span {
        &.button-link__primary-text {
          display: none;
        }

        &:not(.button-link__primary-text) {
          display: inline-block;
          letter-spacing: 0;
          color: #939393;
          border-bottom: 1px solid #939393;
        }
      }
    }
  }

  .article-thumbs__list {
    flex-wrap: wrap;
    padding: 0;
  }

  .article-thumbs__item {
    display: block;
    width: 100%;
    margin-top: 20px;
    line-height: 24px;
    font-size: 14px;
    padding: 0;
    border: none !important;

    h3 {
      margin: 0 0 32px 0;
      font-size: 18px;
      line-height: 22px;
      color: #939393;
    }

    //.date {
    //  float: left;
    //  margin: 0;
    //  font-size: 14px;
    //  line-height: 14px;
    //  color: #939393;
    //
    //  span {
    //    font-size: 14px;
    //    line-height: 18px;
    //
    //    &::after {
    //      content: '-';
    //      display: inline-block;
    //      padding-right: 4px;
    //      padding-left: 4px;
    //      font-size: 14px;
    //      line-height: 18px;
    //    }
    //  }
    //
    //  svg.icon {
    //    display: none;
    //  }
    //}
  }
}