Product preview card component

The most difficult part for me was making the image responsive. From the beginning, I chose to use the <picture> tag to add <source> elements and specify breakpoints. However, when using the browser's developer tools to test different sizes, the image sometimes overflowed or got compressed. Despite setting the container's width to 100%, using object-fit: cover, and trying Flexbox, I still couldn't make the image fully depend on its parent and adapt properly. In the end, I gave the parent container a fixed height for the desktop version and tried to make it fit the image's height, although I don't feel it's a good practice.

I would like to know how I can improve, if there is a way to fix it, or if maybe I did something wrong that altered the image's behavior.