Product Preview Card HTML/CSS

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

Took me a while to figure out how to handle the change in grid layout and to render the correct image depending on the viewport width. I was initially trying with srcset inside the img, but ended up needing to use instead.

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

I would have preferred to solve this with grid-auto-columns/rows, but I ended up having issues with the image sizing, where the image would just be way too big.

I wonder if there is an elegant way to use grid-auto-columns/rows or if grid-template-columns/rows is just the way to go when managing full-bleed vs padded content.