Перенос элементов

Наши карточки шириной 12rem (см. правило для .card), но в узком окне предпросмотра они сжимаются. Дело в том, что flex-контейнер держит все свои элементы на одной линии, а когда они не помещаются, сжимает их — даже меньше заданной width. А когда сжиматься дальше некуда (примерно до ширины самого длинного слова), они вылезают за пределы контейнера.

Обычно лучше сохранить ширину карточек, а те, что не поместились, перенести на следующую линию — как слова в абзаце. Это задаёт свойство flex-wrap flex-контейнера:

• nowrap: все элементы остаются на одной линии. Это значение по умолчанию.
• wrap: элементы, которые не помещаются, переносятся на следующую линию.

Промежуток, заданный через gap, действует и между линиями. (Если вам когда-нибудь понадобится другой промежуток между линиями, чем между элементами, есть свойства row-gap и column-gap.)

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