Responsiveness and Proper Spacing

Congratulations well done. The desktop version it is ok, you just need to fix the button. Remove the border and add a hover effect.

Because the page needs two different pictures that are loaded in different occasions. You can use the picture element to do this.

There is also some distortion on the image when going to mobile version and the width of the image doesn't match the width of the card.

<div class="img-side">
<picture>
<source media="(min-width: 750px)" srcset="images/image-product-desktop.jpg">
<source media="(min-width: 375px)" srcset="images/image-product-mobile.jpg">
<img src="images/image-product-desktop.jpg" alt="Product Image">
</picture>
</div>

@media screen and (max-width: 750px) {
.product-card {
flex-direction: column;
}
   
.img-side img {
/* to fix issues with the image on mobile */
width: 317px; /* change to this */
height: 100%; /* change to this */
border-radius: 10px 10px 0px 0px;
}