Product preview card component

Your solution is lovely. Well done. For mobile view, you can use media query. example you can change the flex-direction of your card to column and then adjust the width of your of your image and the other container to fit properly.

@media only screen and (max-width: 600px){
.card{
flex-direction: column;
}
}

You can learn more about media querries: here

Also to change the image to the mobile image on smaller screens you can enclose your images in a picture tag. example.

<picture>
<source media="(max-width: 700px)" srcset="./images/image-product-mobile.jpg"/> //where this represents your mobile view image
<img src="./images/image-product-desktop.jpg" alt=" "> //where this represents your desktop view image
</picture>

This is a link to learn more about this: picture-tag