Product preview card component solution

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

Mobile-first approach but also mixing between flex and grid layout for good layout.

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

I had big challenges to switching image between desktop and mobile. I didn't know about the <picture> tag and switching image depending on the size of the screen. Image also was very challenging for me to resize on desktop, but also modifying via css since it became <picture> instead of <img>

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

I had the most difficulty of sizing the product card on the desktop view. Since I didn't have Figma, I wasn't sure whether to set the product card dimensions fixed, or whether to make it resizable based on the width of the screen. In the end, because I didn't wanted to have the product to stretch out on the larger screen, I decided to keep it fixed and eyeball the size of the product card. I'm not sure if this is the right approach, and if there's alternative approach to this, I would like your feedback on this part.