// ============================================================================
// :: MOSAIC
// ============================================================================
.l-mosaic {
	grid-auto-flow: dense;
	grid-auto-rows: 300px;
	grid-template-columns: repeat(4, 1fr);
	display: grid;
	display: -ms-grid;
	width: 100%;
	-ms-grid-columns: 1fr 1fr 1fr 1fr;
	-ms-grid-rows: 300px 300px;
	grid-gap: 0.6rem;

	@include respond-to($screen-small-base) {
		grid-auto-rows: 250px;
		grid-template-columns: repeat(2, 1fr);
		-ms-grid-columns: 1fr 1fr;
		-ms-grid-rows: 250px 250px 250px;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
[class*="l-mosaic__col"] {
	width: 100%;
}

@for $i from 1 through 4 {

	[class*="l-mosaic__col-#{$i}"] {
		grid-column: #{$i} span;
		-ms-grid-column-span: #{$i};
	}
}

@for $i from 1 through 2 {

	[class*="l-mosaic__row-#{$i}"] {
		grid-row: #{$i} span;
		-ms-grid-row-span: #{$i};

		@include respond-to($screen-small-base) {
			grid-row: 1 span;
			-ms-grid-row-span: 1;
		}
	}
}

@for $i from 1 through 4 {

	@for $j from 1 through 2 {

		[class*="l-mosaic__#{$j}-#{$i}"] {
			-ms-grid-column: #{$i};
			-ms-grid-row: #{$j};

			@include respond-to($screen-small-base) {

				&:not(:first-child) {
					-ms-grid-column: #{$i - 2};
					-ms-grid-row: #{$j + 1};
				}
			}
		}
	}
}