.media{*zoom:1}.media::before,.media::after{content:" ";display:table}.media::after{clear:both}html{display:grid;height:100%;line-height:1.6}body{display:grid;grid-template-rows:auto 1fr auto;min-height:0;gap:2rem;font-size:1em;font-family:"Lexend","system-ui",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}body:has(main+aside:first-of-type){grid-template-columns:20rem 1fr}body:has(aside:first-of-type+main){grid-template-columns:1fr 20rem}body:has(main+aside:last-of-type){grid-template-columns:1fr 20rem}body:has(main+aside:first-of-type+aside:last-of-type){grid-template-columns:20rem 1fr 20rem}header{grid-column:1/-1;background:red;padding:1em;order:0}main{background:#add8e6;padding:1em;overflow:auto;order:2}main p{margin-block:0 1rem}aside:first-of-type{background:orange;padding:1em;order:1}aside:last-of-type{background:orange;padding:1em;order:3}footer{grid-column:1/-1;background:green;padding:1em;order:4}@supports not selector(:has(*)){body{grid-template-columns:auto 1fr auto}aside{width:200px}main{grid-column:span 2}}.media--left>figure{float:left;margin-inline-start:0;margin-inline-end:1em}.media--right>figure{float:right;margin-inline-start:1em;margin-inline-end:0}