A media query applies CSS rules only if a condition is met, such as the window width or the user's preference (prefers-color-scheme, prefers-reduced-motion). It defines breakpoints where the layout changes. The mobile-first approach uses min-width.
Example
@media (min-width: 48rem) {
.grille { grid-template-columns: 1fr 1fr; }
}