$wrapper: 1200px;
$col: 1fr;
$gutter: 20px;

$wrapper-l: 90%;
$col-l: calc((1000px - (13 * 40px)) / 12);
$gutter-l: 40px;

$col-xl: calc((1200px - (13 * 50px)) / 12);
$gutter-xl: 50px;

body {
	background-color: lighten(grey, 30%);
}

.wrapper {
	max-width: $wrapper;
	margin: 20px auto;
	
	@media (min-width: 1300px) {
		max-width: $wrapper-l;
	}
}

.grid {
	display: grid;
	padding: $gutter;
	grid-template-columns: 1fr repeat(12, $col) 1fr;
	grid-template-rows: repeat(2, minmax(150px, auto));
	grid-gap: $gutter;
	border: 1px solid grey;
	background: white;
	width: auto;
	
	@media (min-width: 1300px) {
		grid-template-columns: 1fr repeat(12, $col-l) 1fr;
		grid-gap: $gutter-l;
		padding: $col-l;
	}
	
	@media (min-width: 1500px) {
		grid-template-columns: 1fr repeat(12, $col-xl) 1fr;
		grid-gap: $gutter-xl;
		padding: $col-xl;
	}
}

.grid__item {
	border: 1px solid blue;
}

.grid__item--heading {
	grid-column: 2 / 11;
}

.grid__item--body {
	grid-column: 2 / 8;
	grid-row: 2 / span 1;
}

.grid__item--media {
	background: hotPink;
	grid-column: 11 / 14;
	grid-row: 1 / span 2;
}