*{font-family:roboto,sans-serif}body{background-color:#ddd;margin:0;font-size-adjust:1.1}main{height:100vh;width:100vw;display:grid;grid-template-columns:auto;grid-template-rows:auto;grid-template-areas:"topbar" "crumbs" "article" "sidebar" "footer"}aside.advert3{display:none}@media(min-width:800px){main{grid-template-columns:auto;grid-template-rows:auto;grid-template-areas:"topbar   topbar" "banner   banner" "sidebar  crumbs" "sidebar  article" "footer   footer"}aside.advert3{display:grid}}header.topbar{grid-area:topbar;background-color:#b61f1f;padding:.5em 0}header.topbar li{display:inline;padding-right:3em}header.banner{grid-area:banner}header.crumbs{grid-area:crumbs}header.crumbs li{display:inline}header.crumbs li+li::before{content:" > "}aside.advert1{grid-area:advert1}aside.advert2{grid-area:advert2}aside.advert3{grid-area:advert3}aside.sidebar{grid-area:sidebar;background-color:#ccc;padding-right:2em}article{grid-area:article;margin:0 1em}footer{grid-area:footer;background-color:#ccc;padding:0 1em}img{height:auto;width:100%}img.advert{border:2px dashed #000}