📦 Почему карточка ломается на широком мониторе

Медиазапрос @media знает только ширину окна. Положите карточку в колонку 300px на экране 1920px, и правило min-width: 1024px всё равно сработает. Карточка получит широкую раскладку и начнёт сжиматься и вылезать за края.

Контейнерный запрос @container спрашивает другое: сколько места у компонента именно здесь. Обёртку объявляем контейнером, а стили карточки завязываем на её ширину:

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

@container card (min-width: 450px) {
.card {
display: flex;
flex-direction: row;
}
}

Теперь карточка встаёт в ряд, только если у обёртки есть 450px по горизонтали. Хоть на телефоне, хоть в узком сайдбаре десктопа.

Подвох: контейнер не может запрашивать сам себя. Чтобы менять .card, её нужно обернуть ещё одним элементом.

В статье ещё типографика на единицах cqi и способ поймать перенос строки во flexbox без JavaScript.

👉 @seniorFront