Responsive grid + teasers

by phloe

HTML

<link rel="stylesheet" href="https://www.dr.dk/global/webfonts.css">

<div class="container">

	<h2>Grid layout</h2>

	<div class="grid grid-layout">

		<div class="teaser teaser--lg-6 teaser--sm-6 teaser--md-10">
			<div class="image"></div>
			<div class="text">
				<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
			</div>
		</div>

		<div>
			<div class="grid grid-sublayout-b">
				<div class="teaser teaser--lg-4 teaser--sm-4 teaser--xs-4">
					<div class="image"></div>
					<div class="text">
						<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
					</div>
				</div>

				<div class="teaser teaser--lg-4 teaser--sm-4 teaser--xs-4">
					<div class="image"></div>
					<div class="text">
						<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
					</div>
				</div>
			</div>
		</div>

		<div>
			<div class="grid">
				<div class="teaser teaser--xxs-2">
					<div class="image"></div>
					<div class="text">
						<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
					</div>
				</div>
				<div class="teaser teaser--xxs-2">
					<div class="image"></div>
					<div class="text">
						<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
					</div>
				</div>
				<div class="teaser teaser--xxs-2">
					<div class="image"></div>
					<div class="text">
						<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
					</div>
				</div>
				<div class="teaser teaser--xxs-2">
					<div class="image"></div>
					<div class="text">
						<h3>I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden</h3>
					</div>
				</div>
			</div>
		</div>

	</div>

	<h2>Teaser overview</h2>

	<div class="grid grid-overview">
		<div class="teaser teaser--xl-12">
			<div class="image"></div>
			<div...

CSS

:root {
	--columns: 2;
	--margin: 10px;
}

body {
	font-family: Gibson;
}

.container {
	margin: calc(2 * var(--margin)) var(--margin);
	min-width: 300px;
}

@media (min-width: 1440px) {
	.container {
		max-width: 1400px;
		margin: calc(2 * var(--margin)) auto;
	}
}

.grid {
	display: grid;
	grid-gap: calc(2 * var(--margin));
}

.grid-overview {
	grid-template: "a" "b" "c" "d" "e" "f" / 1fr;
	margin: var(--margin) 0;
}

@media (min-width: 240px) {
	.grid-overview {
		grid-template: "a a" "b b" "c c" "d d" "e e" "f ." / 1fr 1fr;
	}
}

@media (min-width: 480px) {
	.grid-overview {
		grid-template: "a a a" "b b b" "c c c" "d d d" "e e ." "f . ." / 1fr 1fr 1fr;
	}
}

@media (min-width: 720px) {
	.grid-overview {
		grid-template: "a a a a" "b b b b" "c c c c" "d d d ." "e e . ." "f . . ." / 1fr 1fr 1fr 1fr;
	}
}

@media (min-width: 960px) {
	.grid-overview {
		grid-template: "a a a a a" "b b b b b" "c c c c ." "d d d . ." "e e . . ." "f . . . ." / 1fr 1fr 1fr 1fr 1fr;
	}
}

@media (min-width: 1200px) {
	.grid-overview {
		grid-template: "a a a a a a" "b b b b b ." "c c c c . ." "d d d . . ." "e e . . . ." "f . . . . ." / 1fr 1fr 1fr 1fr 1fr 1fr;
	}
}

.grid-overview > :nth-child(1) {
	grid-area: a;
}

.grid-overview > :nth-child(2) {
	grid-area: b;
}

.grid-overview > :nth-child(3) {
	grid-area: c;
}

.grid-overview > :nth-child(4) {
	grid-area: d;
}

.grid-overview > :nth-child(5) {
	grid-area: e;
}

.grid-overview > :nth-child(6) {
	grid-area: f;
}

.teaser {
	--span: 12;
	--size: 9;
	width: calc((100% / (var(--columns) / var(--span))) - (2 * var(--margin)));
	max-width: calc(100% - 2 * var(--margin));
	background-color: #FFF;
	margin: var(--margin);
	float: left;
	clear: left;
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.image {
	padding-bottom: 56.25%;
	background-color: rgba(0, 0, 0, 0.1);
}

.text h3 {
	font-size: calc(var(--size) * 6px);
	line-height: calc(var(--size) * 6px + 6px);
	font-weight: bold;
	margin-top: 10px;
}

@media (max-width: 1199px)...