Responsive product preview card using Flexbox

What are you most proud of, and what would you do differently next time?

I’m proud to have used em and rem units for the first time — I think I’m finally getting it.

What challenges did you encounter, and how did you overcome them?

In the desktop version, I had an issue with the image showing white lines on the top and bottom, but I fixed it using max-height.

What specific areas of your project would you like help with?

When I use the code below to center the container/card, I run into an issue on smaller screens (like an iPhone SE). The card doesn't display properly — it's cut off at the top.

body{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}