/*
 * Card grid
 *
 */

$o-card-grid-items-m:   2; // Number of cards when in medium viewport
$o-card-grid-items-l:   3; // Number of cards when in large viewport
$o-card-grid-m-bp:      600; // Custom breakpoint when switching from stacked cards to rows
$o-card-grid-spacing:   space(4);

$o-card-grid-size-m:    percentage(1/$o-card-grid-items-m);
$o-card-grid-size-l:    percentage(1/$o-card-grid-items-l);



.o-card-grid__main {
  @include mq($o-card-grid-m-bp) {
    display: flex;
    flex-wrap: wrap;
  }
}

.o-card-grid__item {

  // Create nice vertical spacing on mobile
  @include mq($max: $o-card-grid-m-bp){
    & + & {
      margin-top: space(4);
    }
  }

  // Single column (stacked)
  @include mq($max: $o-card-grid-m-bp) {
    max-width: 344px; // constrain the width of the card inside
    margin: 0 auto;
  }

  // Two columns
  @include mq($o-card-grid-m-bp, $max: l) {
    flex: 0;
    // We calculate the size of the item based on the settings and put it in a longhand flex value because of IE support
    flex-basis: calc(#{$o-card-grid-size-m} - ((#{$o-card-grid-items-m} - 1) / #{$o-card-grid-items-m} * #{$o-card-grid-spacing}));
    margin-left: #{$o-card-grid-spacing};

    &:nth-child(#{$o-card-grid-items-m}n + 1) {
      margin-left: 0;
    }

    &:nth-child(n + #{$o-card-grid-items-m + 1}) {
      margin-top: #{$o-card-grid-spacing};
    }
  }

  // Four columns
  @include mq(l) {
    flex: 0;
    // We calculate the size of the item based on the settings and put it in a longhand flex value because of IE support
    flex-basis: calc(#{$o-card-grid-size-l} - ((#{$o-card-grid-items-l} - 1) / #{$o-card-grid-items-l} * #{$o-card-grid-spacing}));
    margin-left: #{$o-card-grid-spacing};

    &:nth-child(#{$o-card-grid-items-l}n + 1) {
      margin-left: 0;
    }

    &:nth-child(n + #{$o-card-grid-items-l + 1}) {
      margin-top: $o-card-grid-spacing;
    }
  }
}