/* In the [$o-card-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
 */


$o-card-grid: (
	'gap' : space(2),
	'columns': (
		2: 740,
		3: 1060,
	),
);

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


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


.o-card-grid__item {
	max-width: 444px; // constrain the width of the element inside
	margin: map-get($o-card-grid, 'gap') auto;


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

		@include mq(map-get($o-card-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($o-card-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($o-card-grid, 'gap')} * 2));
		}
	}
}