Reponsive product previwe card using CSS Grid

Hi Gabriel,

I noticed on larger screens there's a large gap between the image and text since you have a fixed height on your image. Something you might do to combat this is use the following css:

.product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

Even with this, the product doesn't look great on all screen sizes. The easiest solution to this would be to add a max-width to main so it will remain static at the largest visually appealing size. If you wanted to get more advanced, you could use a clamp to grow the text with the screen, but I don't think that's necessary with this project.

Additionally, I'd add a max-width on your mobile product as well around ~425px. Any larger than that and the image dominates until the media break.

Hope this helps!