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

.multi-cards {
  padding: 48px 0;

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

.multi-cards--highlight {
  background-color: $color-alabaster;
}

.multi-cards__container {
  @include make-container();

  .multi-cards--fullwidth & {
    @include media-breakpoint-down(tablet) {
      width: auto;
      padding: 0;
    }
  }
}

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

  @extend %typo-48--serif;

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

.multi-cards__cards {
  flex-wrap: wrap; // TODO: browser support android
  margin: 0;
  overflow: hidden;

  @include media-breakpoint-up(tablet) {
    display: flex;
  }

  .multi-cards--three & {
    @include media-breakpoint-up(tablet) {
      display: block;
    }

    @include media-breakpoint-up(smallDesktop) {
      display: flex;
    }
  }

  .multi-cards--fullwidth & {
    padding-right: 0;
    padding-left: 0;

    @include media-breakpoint-up(tablet) {
      padding-right: $grid-gutter-width-base/2;
      padding-left: $grid-gutter-width-base/2;
    }

    .multi-cards--three & {
      @include media-breakpoint-up(tablet) {
        padding-right: 0;
        padding-left: 0;
      }

      @include media-breakpoint-up(smallDesktop) {
        padding-right: $grid-gutter-width-base/2;
        padding-left: $grid-gutter-width-base/2;
      }
    }
  }
}

.multi-cards__card {
  padding: 0 15px;
  margin-bottom: 56px;

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

  .multi-cards--fullwidth & {
    padding-right: 0;
    padding-left: 0;

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

  @include media-breakpoint-up(tablet) {
    flex: 1;
    min-width: 50%;

    &:last-child {
      margin-bottom: 56px;
    }
  }

  @include media-breakpoint-up(fullDesktop) {
    min-width: 25%;
  }

  .multi-cards--three & {
    min-width: 0;

    &:nth-child(n+3) {
      margin-top: 0;
    }

    @include media-breakpoint-up(smallDesktop) {
      min-width: 33%;
    }
  }
}