Мы увеличили картинку в одной из карточек, и вёрстка сломалась.

Так произошло потому, что карточкам задана фиксированная ширина. Если использовать картинку большего размера, она выпадет из контейнера. Чтобы не допускать подобного, верстальщики добавляют картинкам такие стили:

img {
  max-width: 100%;
  height: auto;
}

Свойство max-width задаёт максимальную ширину, а значение 100% говорит, что элемент не должен становиться больше ширины родителя.

Свойство height задаёт высоту элемента. Значение auto используют, чтобы изображение не деформировалось и сохраняло свои пропорции. Если его не указать, то будет использовано значение атрибута height из разметки, и изображение, скорее всего, исказится.

Этот способ работает, потому что у CSS-свойств max-width и height приоритет выше, чем у атрибутов width и height в разметке.

Добавим картинкам максимальную ширину 100% и автоматическую высоту. После этого увеличим картинки в оставшихся карточках и убедимся, что они не выпадают и не деформируются.