Media query e responsive

Le @media applicano regole in base a condizioni: larghezza (min-width, max-width), orientamento, preferenze di movimento o contrasto.

Mobile-first: partire da stili stretti e aggiungere regole con min-width crescenti.

Esempio

.grid { display: grid; gap: 1rem; }
@media (min-width: 48rem) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}