Медиазапросы против контейнерных

Медиазапрос отвечает на вопрос «какой экран и какое устройство»: ширина viewport, наличие ховера, точность указателя, просьба уменьшить анимации. Контейнерный запрос отвечает на вопрос «сколько места у этого компонента». Чтобы он работал, предку задают container-type: inline-size, это включает изоляцию размера по ширине: ширина контейнера перестаёт зависеть от содержимого, и браузер может без цикла применить стили к потомкам. Поэтому элемент и не может запрашивать сам себя, правила работают для его детей. Если контейнеров несколько вложенных, запрос смотрит на ближайший подходящий, а через имя (container: sidebar / inline-size) можно обратиться к конкретному. На практике каркас страницы, меню и общие отступы делаю на медиазапросах, а карточки, виджеты и прочие переиспользуемые компоненты на контейнерных, тогда компонент выглядит правильно и в сайдбаре, и в модалке, и в основной колонке без знания о странице.