Product preview card component challenge

I figured out how to use <picture> and srcset properly for different screen sizes. Next time I’m hoping to try Sass to make my styles more organized.

One challenge I faced was getting the product image to align correctly and fill exactly half of the container without stretching or leaving empty gaps. I struggled with how object-fit, width, height, and flex interact. After experimenting and checking layout behavior in the browser, I realized that I needed to explicitly set both the image and its container to height: 100% and use object-fit: cover to achieve the desired result.