@import "../../scss/variables";
@import "../../scss/grid.mixins";
@import "../../scss/breakpoints.mixins";
@import "../../scss/typo.mixins";

.three-cards {
  padding: 48px 0;

  @include media-breakpoint-up(tablet) {
    padding: 80px 0;
  }
}

.three-cards__container {
  @include make-container;
  @include make-container-max-widths;

  @include media-breakpoint-down(mobile) {
    width: auto;
    padding: 0;
  }
}

.three-cards__heading {
  margin-bottom: 21px;
  text-align: center;

  @extend %typo-48--serif;

  @include media-breakpoint-up(tablet) {
    margin-bottom: 50px;
  }
}

.three-cards__cards {
  @include media-breakpoint-up(smallDesktop) {
    @include make-row;
  }
}

.three-cards__card {
  margin-bottom: 56px;

  &:last-child {
    margin-bottom: 0;
  }

  @include media-breakpoint-up(smallDesktop) {
    @include make-col-ready;
    @include make-col(4);
  }
}