Film Cards in a Grid

The three films should stand side by side, in three columns of the same width. That's a job for CSS Grid: .films, the div around the cards, becomes the grid container, and the cards become its items. Three columns of one fraction each, 1fr 1fr 1fr (or repeat(3, 1fr)), share its width equally, and gap puts 24 pixels between them.

Then each card gets the look of a card: padding, a thin border in light beige (#e5d9c5), rounded corners and a white background, so that it stands out on the cream page.

Finally, the line with the genre and the length is less important than the film's name and description, so it will be smaller and gray (#6b7280).

If your preview is narrow, the cards will be quite squeezed: three columns are meant for a computer screen. You'll learn to change the layout for narrow screens later, in the Tailwind course.