<div class="grid">
	<div class="grid__item grid__item--lg">
		<span>1</span>
		<h1>Aspect ratio grid with Sass function</h1>
		<h2>Current ratio: 1:1</h2>
		<p>Putting the ratio in a function makes it reusable and allows us to change it</p>
	</div>
	<div class="grid__item grid__item--sm">2</div>
	<div class="grid__item grid__item--sm">3</div>
	<div class="grid__item grid__item--db">4</div>
	<div class="grid__item grid__item--lg grid__item--right">5
		<h2>Current ratio: 16:9</h2>
	</div>
	<div class="grid__item grid__item--sm">6</div>
	<div class="grid__item grid__item--db">7</div>
	<div class="grid__item grid__item--sm">8</div>
</div>

* {
	box-sizing: border-box;
}

p {
	font-size: 1.4rem;
	line-height: 1.3;
}

a {
	color: darken(steelBlue, 20%);
	
	&:hover,
	&:focus {
		color: black;
	}
}

$wrapper: 100vw;
$gutter: 10px;
$noOfColumns: 4;

$noOfGutters: $noOfColumns - 1;

@function aspect-ratio($ratioA, $ratioB) {
	$factor: calc(#{$ratioA} / #{$ratioB});

	@return calc( (#{$wrapper} - (#{$noOfGutters} * #{$gutter})) / (#{$noOfColumns} * #{$factor}));
}

.grid {
	max-width: $wrapper;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	grid-auto-rows: minmax(aspect-ratio(16, 9), auto);
	grid-template-rows: repeat(2, minmax(aspect-ratio(1, 1), auto)) repeat(2, minmax(aspect-ratio(16, 9), auto));
	grid-gap: $gutter;
	margin: $gutter;
}

.grid__item {
	background-color: lightGrey;
	padding: 20px;
}

.grid__item--lg {
	grid-column: span 2;
	grid-row: span 2;
	background-color: grey;
}

.grid__item--right {
	grid-column: 3 / span 2;
}

.grid__item--db {
	grid-column: span 2;
	background-color: lightBlue;
}