/* 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); }