Синтаксис диапазонов (width >= 48rem) заменяет классические min-width / max-width цепочки и легче читается в code review.
Комбинируйте с rem и container queries: media — для shell/layout, container — для карточек.
- [Media Queries Level 4 — W3C](https://www.w3.org/TR/mediaqueries-4/#range-context) — Спецификация range context.
- [@media — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) — Современный синтаксис в примерах.
---
## Миграция
PostCSS и современные браузеры поддерживают range; для legacy оставьте один fallback-файл, а не дублируйте все правила.
Зафиксируйте брейкпоинты в design tokens, чтобы дизайн и вёрстка ссылались на одни числа.