Product preview card component

Hi there 👋

Really nice work, for the image swapping it is considered best practise to use picture and srcset tags. See an example below

    <picture>
        <source media="(min-width: 800px)" srcset="large-image.jpg">
        <img src="small-image.jpg" alt="Description of image">
    </picture>

Here the "large.img will be used for screens wider than 800px and small will be displayed on screens under that.

Here is an article on the topic: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Keep up the good work my friend!

Happy coding!