/*==========================================================================
 * Matrix grid
 *
 * The matrix 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-matrix-gutter: 			3.87%; 		// translates to max. half of 100px (50px)
$l-matrix-gutter--dense: 	2.8773%; 	// translates to max. half of 75px (36.5px)


.l-matrix {
	@include flex(center column);
	margin: 0;
	list-style: none;
}

.l-matrix__item {
	@include flex(stretch);
	margin: 0 0 6vh 0; 	// stretch the margin based on the HEIGHT of the viewport
	max-width: 350px; 	// keep the item reasonably sized
	width: 100%;
}

@include mq(768) {
	.l-matrix {
		@include flex(stretch wrap);
		margin: -#{$l-matrix-gutter}; // Negative margin to compensate the extra margin on the items
	}

	.l-matrix__item {
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: #{(100% - ($l-matrix-gutter * 2 * 3)) / 3};
		min-width: 258px;
		margin: $l-matrix-gutter;
	}

	.l-matrix--dense {
		margin: -#{$l-matrix-gutter--dense}; // Negative margin to compensate the extra margin on the items

		& .l-matrix__item {
			flex-basis: #{(100% - ($l-matrix-gutter--dense * 2 * 3)) / 3};
			margin: $l-matrix-gutter--dense;
		}
	}

	.l-matrix--center {
		.l-matrix__item {
			align-items: center;
		}
	}
}