.categories {
  @extend %container;

  padding-bottom: 10px;
  @include media('tablet-m') {
    margin-bottom: 15px !important;
  }
  @include media('tablet-s') {
    margin-bottom: 10px !important;
  }
}

.categories__list {
  @include reset-list;

  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 10px 0;
}

.categories__item {
  width: calc(33.3333% - 29px);
  margin: 14.5px;
  padding: 15px 15px 22px;
  border: 1px solid $color-pale-grey;

  h3 {
    width: 100%;
    margin: 0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1em;
    color: #979797;
    text-align: center;
  }

  &:hover {
    box-shadow: 0 5px 25px rgba(11, 28, 42, 0.15);
  }
}

.categories__column {
  padding: 6px 24px;

  .picture-wrp {
    padding-bottom: 91%;

    picture {
      display: block;
      bottom: 0;

      img {
        height: 100%;
        object-fit: contain;
      }
    }
  }
}

@include media('tablet-s') {
  .categories__list {
    justify-content: space-between;
    padding: 10px 0;
  }

  .categories__item {
    width: calc(50% - 6.5px);
    margin: 0;
    padding: 3px;

    &:nth-of-type(n+3) {
      margin-top: 22.5px;
    }

    h3 {
      margin-bottom: 7px;
      font-size: 16px;
      line-height: 1;
    }
  }

  .categories__column {
    .picture-wrp {
      padding-bottom: 102%;
    }
  }
}