body{margin:0}header{border-bottom:1px solid #eee;display:flex;padding:var(--spacing)}footer{margin-top:var(--spacing)}a{color:currentColor}nav ul,footer ul,.card 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__footer button{width:100%}.footer-card{padding:var(--spacing)}header{flex-direction:column;justify-content:space-between;align-items:center}.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{text-align:center;grid-column:5 / 13}#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}}