Запись @media (width >= 48rem) понятнее цепочек min-width + max-width — меньше off-by-one на границе брейкпоинта.
Сочетайте с токенами --bp-md: 48rem в :root.
- [Using media query ranges — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries#creating_media_queries_with_range_syntax) — Range syntax.
- [Media Queries Level 4 — W3C](https://www.w3.org/TR/mediaqueries-4/#range-context) — Спецификация.
---
## Container queries
Для компонентов предпочитайте @container — viewport breakpoints для страницы, container для карточки.