/* In the [$l-triple-grid] map we define some settings:
 *
 * 'columns'.key 	=	number of items in a row
 * 'columns'.value 	= 	breakpoint size from which we want that number of items
 */


$l-triple-grid: (
    'gap' : halve(space(4.5)),
    'columns': (
        2: 740,
        3: 1060,
    ),
);

// Get values from the map and place them in an easy to access variable
$l-triple-grid-columns: 			map-get($l-triple-grid, 'columns'); // get the 'columns' list
$l-triple-grid-column-keys: 		map-keys($l-triple-grid-columns); // get a list of the keys from the 'columns'
$l-triple-grid-column-smallest-bp: 	map-get($l-triple-grid-columns, nth($l-triple-grid-column-keys, 1)); // get breakpoint value of the first column


.l-triple-grid {
  @include mq($max: $l-triple-grid-column-smallest-bp) {
    margin-bottom: space(6); // because of shadow we need some extra space
  }

  @include mq($l-triple-grid-column-smallest-bp) {
    display: flex;
    flex-wrap: wrap;
    margin: map-get($l-triple-grid, 'gap') * -1;
  }
}


.l-triple-grid__item {
  margin: map-get($l-triple-grid, 'gap') auto;

  @include mq($max: $l-triple-grid-column-smallest-bp) {
    margin-bottom: space(5);
    max-width: 360px; // constrain the width of the element inside
  }

  // Loop through all defined columns
  @each $count, $breakpoint in $l-triple-grid-columns {
    $i: index($l-triple-grid-columns, ($count $breakpoint));

    @include mq(map-get($l-triple-grid-columns, $count)) {
      @if($i == 1) {
        // Only set these values for the first media query, no need to set them every time
        flex: none;
        margin: map-get($l-triple-grid, 'gap');
      }

      // in case of a bug in IE we need to specify flex-basis longhand property: https://github.com/philipwalton/flexbugs#flexbug-8
      flex-basis: calc(#{percentage(1 / $count)} - (#{map-get($l-triple-grid, 'gap')} * 2));
    }
  }

  // Make direct children all fill the full height
  & > * {
    height: 100%;
  }
}