body{margin:0}header{border-bottom:1px solid #eee;display:flex;padding:var(--spacing)}footer{margin-top:var(--spacing)}a{color:currentColor}.card ul,footer ul,nav ul{list-style:none;margin:0;padding:0}nav li{display:inline-block;margin:0 8px}nav li:first-child{margin-left:0}.container{display:flex;justify-content:center}.grid{margin:0 16px;width:min(100%,1280px)}.grid>*{outline:var(--debug-area-outline)}#intro{padding:0 var(--spacing);text-align:center}.card{border:1px solid #aaa;margin:0 16px}.card>div{padding:var(--spacing);text-align:center}.card__header{background-color:#ddd}.card__header h2{margin:0}.card__action button{width:100%}.footer-card{padding:var(--spacing)}header{align-items:center;flex-direction:column;justify-content:space-between}.main-navigation{grid-area:1/1/span 1/span 8}nav{text-align:center}nav ul{display:block}#intro{grid-area:1/1/span 1/span 8}#card-1{grid-area:2/1/span 1/span 8}#card-2{grid-area:3/1/span 1/span 8}#card-3{grid-area:4/1/span 1/span 8}#footer-card-1,#footer-card-2,#footer-card-3,#footer-card-4{grid-column:1/span 8}@media(min-width:512px){header{flex-direction:row;justify-content:space-between}.main-navigation{grid-area:1/1/span 1/span 16}nav ul{display:inline-block}#intro{grid-column:5/13;text-align:center}#card-1{grid-area:2/3/span 1/span 4}#card-2{grid-area:2/7/span 1/span 4}#card-3{grid-area:2/11/span 1/span 4}#footer-card-1{grid-column:1/5;grid-row:1}#footer-card-2{grid-column:5/9;grid-row:1}#footer-card-3{grid-column:9/13;grid-row:1}#footer-card-4{grid-column:13/17;grid-row:1}}