:root {
	--wrapper: 1200px;
	--col: 1fr;
	--gutter: 20px;
	
	@media (min-width: 1300px) {
		--wrapper: 90%;
		--col: calc((1000px - (13 * 40px)) / 12);
		--gutter: 40px;
	}
	
	@media (min-width: 1500px) {
		--wrapper: 90%;
		--col: calc((1200px - (13 * 50px)) / 12);
		--gutter: 50px;
	}
}

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

.wrapper {
	max-width: var(--wrapper);
	margin: 20px auto;
}

.grid {
	display: grid;
	padding: var(--gutter);
	grid-template-columns: 1fr repeat(12, var(--col)) 1fr;
	grid-template-rows: repeat(2, minmax(150px, auto));
	grid-gap: var(--gutter);
	border: 1px solid grey;
	background: white;
	width: auto;
}

.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;
}