.popular-categories {
  &__inner {
    @include make-container;
    @include make-container-max-widths;
  }

  h2 {
    margin-bottom: 30px;
  }

  .card {
    @include make-col-ready;
    @include make-col(4);

    @include media-breakpoint-down(sm) {
      @include make-col(6);
    }

    &__inner {
      border: 1px solid $gray;

      a {
        color: $black;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }

    &__content {
      //border-top: 1px solid $gray;

      .card__title {
        margin-bottom: 15px;
        text-align: left;
        font-size: 1.05rem;

        @include media-breakpoint-down(md) {
          font-size: 1rem;
        }
      }

      .link-primary {
        font-size: 1rem;
      }
    }
  }

  &.four-in-row {
    .card {
      @include make-col(3);

      @include media-breakpoint-down(sm) {
        @include make-col(6);
      }
    }
  }
}