dvb/app/res/css/layout.css

/* LAYOUT */

.container {
	display: grid;
	grid-template: calc(100vw / 4) 5em 1fr / 100%;
	grid-template-areas: "side" "top" "body";
	background: var(--clr-light);
	color: var(--clr-dark);
}

@media only screen and (min-width: 70em) {
	.container {
		grid-template: auto 1fr / 1fr calc(100vh / 4);
		grid-template-areas: "top side" "body side";
	}
}

.container>div {
	overflow: hidden;
}

.container>.top {
	grid-area: top;
}

.container>.side {
	grid-area: side;
}

.container>.body {
	grid-area: body;
	box-shadow: 2em -2em 8em -5em rgba(0, 0, 0, 1);
}