Homework — make the layout respond, and know which tool is doing what.

1. Watch it flow. Grab the window edge and drag it from full width down to phone width. Count the columns as they change: five or four, then three, then two, then one. Nothing you wrote reacts to a specific width — auto-fill and minmax do it all. Confirm for yourself there's no media query involved yet.
2. Name the tool. Look at three parts of your page and say which layout each uses and why: the nav bar (a row of items), the inside of a card (header stacked over body), and the gallery (a wrapping field of cells). Two are flexbox, one is grid — be able to say which is which and what makes it one-dimensional or two.

Try it alone: in the dev tools, change minmax(280px, 1fr) to minmax(200px, 1fr) and watch more, narrower columns appear; then try minmax(360px, 1fr) for fewer, wider ones. Then swap auto-fill for auto-fit and narrow the window with only a couple of cards showing — see how auto-fit stretches them to fill the row while auto-fill would keep them card-sized. Put it back to auto-fill, minmax(280px, 1fr) when you're done.

Required result: a gallery that flows from several columns down to one as the screen narrows, with no media query, and you can point at each part of the page and name flex or grid.

To submit: two screenshots of the same page — one wide (several columns), one narrow (one column) — and one sentence naming the layout tool used by the nav bar and the one used by the gallery.

Next. The gallery already adapts, but the rest of the page doesn't: on a phone the nav still wears its desktop spacing, and there's no way for a visitor to send anything back. Next lesson — forms and responsive design — adds a real, accessible form and the media queries that tune the whole page for small screens, mobile-first.