Images that fill their boxes

Images don't come in a single shape: some are portrait, some landscape and some square. If you leave each one at its original ratio, cards sitting side by side end up with different heights and the row looks ragged.

Two properties solve this. aspect-ratio: 16 / 9 forces the box into that ratio whatever its width, and object-fit: cover fills the box with the image and crops whatever extends past its edges. The trap is writing a fixed height instead. The boxes do match, but the default value of object-fit, fill, stretches the image so the circle turns into an oval, and the fixed height stops fitting the moment the width changes.

That leaves the corners. The card has rounded corners and the image has sharp ones that poke out past the border, so you put overflow: hidden on the card to clip everything outside its bounds.