Responsive product card using Flexbox and custom properties

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

I'm most proud of how clean and responsive the layout turned out using just Flexbox and semantic HTML. I was able to closely match the original design and make it responsive for both mobile and desktop views.

Next time, I would like to explore implementing the same design using CSS Grid or utility-first CSS frameworks like Tailwind to compare the workflow and flexibility.

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

One challenge was ensuring the image and content aligned perfectly on desktop view, especially maintaining equal height between them.

I solved this using flex: 1 and object-fit: cover inside the media query.

Another small challenge was vertical scrolling on smaller screens, but after checking the original design, I confirmed that minimal scroll is expected and acceptable.

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

I would love feedback on anything.