body {
display: grid;
grid-template-rows: [head] auto [main] 9fr [foot] 1fr;
}

body header {
font-size: 1.8rem;
grid-row: head;
width: 100%
}

body footer {
font-size: 1.8rem;
grid-row: foot;
margin-left: auto;
margin-right: auto;
padding-top: 1.6rem;
width: 100%;
}

main {
grid-row: main;
max-width: 48rem;
margin-left: auto;
margin-right: auto;
padding-bottom: 1.2rem;
padding-left: 2.4rem;
padding-right: 0.4rem;
padding-bottom: 2.0rem;
padding-top: 2.4rem;
}

main:has(blockquote) {
background-color: white;
}

blockquote {
padding: 0.2rem;
}

p {
padding: 0.6rem;
}

cite {
display: block;
font-size: 1.0rem;
margin: 0.4rem 0 0.2rem 0;
}

nav ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

nav ul:has(li.card) {
display: grid;
gap: 0.4rem;
grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
place-items: center;
}

.card {
margin: 0.4rem;
border: 1px yellow;
}

.card div {
display: grid;
grid-template-areas:
"a a a a a a a a b b b b b b"
"a a a a a a a a b b b b b b"
"a a a a a a a a c c c c c c"
"a a a a a a a a c c c c c c"
"a a a a a a a a c c c c c c"
;
}

.card img {
aspect-ratio: 16 / 10;
grid-area: a;
max-width: 18rem;
}

.card span {
display: block;
grid-area: b;
text-align: center;
}

.card p {
grid-area: c;
}