Main
Header, nav, main, aside, and footer are all direct children of the body — one grid places everything, where flexbox (demo 07) needed two nested containers.
Narrow the window below 40rem: the media query rewrites grid-template-areas and the page restacks as a single column. No region's HTML or other CSS changes.