Карточки фильмов в сетке

Три фильма должны стоять рядом, в трёх столбцах одинаковой ширины. Это работа для CSS Grid: .films, div вокруг карточек, становится контейнером сетки, а карточки — его элементами. Три столбца по одной доле, 1fr 1fr 1fr (или repeat(3, 1fr)), делят его ширину поровну, а gap оставляет между ними 24 пикселя.

Затем каждая карточка получает вид карточки: внутренний отступ, тонкую рамку светло-бежевого цвета (#e5d9c5), скруглённые углы и белый фон, чтобы она выделялась на кремовой странице.

Наконец, строка с жанром и продолжительностью менее важна, чем название и описание фильма, поэтому она будет мельче и серой (#6b7280).

Если окно предпросмотра узкое, карточки получатся довольно тесными: три столбца рассчитаны на экран компьютера. Как менять раскладку для узких экранов, вы узнаете позже, в курсе Tailwind CSS.