/* Breakpoints — every responsive threshold lives here, in one place.

   Mobile-first: the base rules target the narrowest screen, and each
   `min-width` query layers the wider layout on top.

   Heads-up: CSS can't read a custom property inside a media condition
   (`@media (min-width: var(--bp-md))` does NOT work without a build step),
   so each component still writes the literal px in its own `@media` — but
   always the value defined here, tagged with the token name in a trailing
   comment so the numbers stay gathered and named:

       @media (min-width: 721px) { ... }  /* --bp-md */

   The custom properties below remain usable from JS and container queries.

   Scale (add --bp-sm / --bp-lg here as new layouts need them):
   --bp-md  721px  stacked → two columns (home: hero | gallery) */
:root {
  --bp-md: 721px;
}