Мы добавили на страницу вторую карточку. Блок с ценой в ней оказался шире третьей колонки, и в результате содержимое выпало из контейнера. Чтобы более высокая цена не вываливалась, нужно увеличить ширину колонки.

Для этого придётся изменить шаблон карточки: увеличить ширину третьей колонки и уменьшить ширину второй. Но какие размеры им задать? Попробуем сделать колонки одинаковыми по ширине. В этом случае места хватит и для заголовка, и для достаточно большой цены. Вот так карточка будет выглядеть, если увеличить цену до миллиона рублей:

Разумеется, если цена дойдёт до 10 миллионов, ширину колонок снова придётся менять. Но для мобильного тарифа это маловероятно.

Работая с макетом, нужно помнить, что даже самый дотошный дизайнер не изобразит на нём все возможные состояния компонента. Верстальщик, приступая к работе, должен проанализировать макет, подумать, как будет меняться содержимое компонета, и учесть это в своей вёрстке.

Итак, изменим ширину колонок и посмотрим, как поведут себя блоки с ценой.