body{margin:0}header{padding:var(--spacing);border-bottom:1px solid #eee;display:flex}footer{margin-top:var(--spacing)}a{color:currentColor}nav ul,footer ul,.card ul{margin:0;padding:0;list-style:none}nav li{margin:0 8px;display:inline-block}nav li:first-child{margin-left:0}.container{justify-content:center;display:flex}.grid{width:min(100%,1280px);margin:0 16px}.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-area:1/1/auto/5}#footer-card-2{grid-area:1/5/auto/9}#footer-card-3{grid-area:1/9/auto/13}#footer-card-4{grid-area:1/13/auto/17}}