Product Card Component using Flexbox

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

I'm proud of the columns of the card component and how I used width in the flex-items to make them equal size.

I used the <picture> element for the first time.

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

When I centered the card I found myself with some scrollable overflow. I learned that I could take advantage of the "scroll" and "overflow" badges that are present in the developer tools in order to identify which elements were causing this trouble. At the end it was a combination of a padding on a parent and a height of 100vh on a child. The solutions was using the padding on the child.