Phones first
Most visitors arrive on a phone. Flexbox lines up the header; Grid flows the menu cards into as many columns as fit; a media query restacks what doesn't fit on a narrow screen.
The layout CSS
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space);
padding: var(--space);
background: var(--brand);
}
.site-header a { color: white; }
.site-header ul { display: flex; gap: var(--space); list-style: none; margin: 0; padding: 0; }
main { max-width: 960px; margin: 0 auto; padding: var(--space); }
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space);
list-style: none;
padding: 0;
}
.card { background: white; border-radius: var(--radius); padding: var(--space); box-shadow: 0 2px 8px rgb(0 0 0 / 0.08); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
@media (max-width: 600px) {
.site-header { flex-direction: column; }
}