/*==========================================================================
 * Card grid
 *
 * The card grid layout is a stacked list if items on small viewports
 * When enough room is available it will put 2 items on a row
 * The maximum number of items in a row is 3, then it wraps to the next row.
 * ========================================================================== */


/**
 * Magic numbers to make the gutter a percentage value so it scales nicely
 * Value is based on the largest possible width of the container,
 * with the negative margin on the component taken into account
 */

$l-card-grid-gutter: 			60px; 		// translates to max. half of 100px (50px)

.l-card-grid {
	margin: auto;
}

@include mq($max: 650) {
	.l-card-grid__item {
		margin: 0 auto;
		width: 100%;
		max-width: 440px;
		@include owl(6vh);
	}
}


@include mq(650) {
	.l-card-grid {
		@include flex(flex-start flex-start wrap);
		margin: -#{$l-card-grid-gutter / 2}; // Negative margin to compensate the extra margin on the items
	}

	.l-card-grid__item {
		width: calc(50% - #{$l-card-grid-gutter});
		margin: #{$l-card-grid-gutter / 2};

		@include mq(1100) {
			width: calc(33.33% - #{$l-card-grid-gutter});
		}
	}
}