🏗️Project: a responsive page

A real responsive page combines everything: a header in flex, a grid of cards, and a media query for mobile.

The goal: a layout that fits on a large screen AND rearranges cleanly on a phone.

.nav { display: flex; justify-content: space-between; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}