body {
	display: grid;
	gap: 0.5em;
}

@media (min-width: 45em) {
	/* Breite beträgt mindestens 45em */
	
	body {
		grid-template-columns: 1fr 3fr 1fr;
		grid-template-rows: auto 1fr 100px;
	}
}

header,
nav,
main,
article,
section,
aside,
footer {
	border-radius: 0px 0.5em 0.5em;
	border: thin solid;
	padding: 10px;
}

header,
footer {
	grid-column: 1 / -1;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
	display: grid;
	grid-template-columns: min-content 1fr;
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
}

main {
	background: #ffede0;
	border-color: #df6c20;
}

aside {
	background: #ebf5d7;
	border-color: #8db243;
}

footer {
	background: #e4ebf2;
	border-color: #8a9da8;
}

footer * {
	float: right;
	clear: right;
	margin: 0 0 1em;
}

body {
	margin: 0 auto;
	max-width: 60em;
	font-family: sans-serif;
}