Как адаптировать компонент по ширине контейнера, а не экрана

Обычные media-запросы ориентируются на ширину окна браузера. Но один и тот же компонент может находиться в широкой секции, узком сайдбаре или сетке карточек.
Для таких случаев в CSS есть контейнерные запросы.
Сначала нужно объявить родительский элемент контейнером:

.card-wrapper {
container-type: inline-size;
}

После этого стили компонента можно менять в зависимости от ширины именно этого контейнера:
.card {
display: grid;
grid-template-columns: 1fr;
}

@container (min-width: 560px) {
.card {
grid-template-columns: 160px 1fr;
}
}

Теперь карточка сама переключит компоновку, когда для неё появится достаточно места — независимо от ширины всего экрана.

Контейнерные запросы особенно удобны для карточек, виджетов, сайдбаров и переиспользуемых компонентов в больших интерфейсах.