Product Preview Card

Try to add the two images to the page at the same time, but one of them should be display: none;(to be hidden) and the other should be display: inline(to be visible), if you are in desktop the desktop image is display: inline; and if you in mobile the mobile image should be display: inline. to make that check this css code below:

/*Small screens*/
@media (max-width: 767px) {
    .mobile-img {
         display: inline;
    }
    .desktop-img {
         display: none;
    }
}
/*Large screens*/
@media (min-width: 768px) {
    .mobile-img {
         display: none;
    }
    .desktop-img {
         display: inline;
    }
}

Hey, well done on completing the project!

The easiest way to change the picture would be to use the <picture> HTML element - it's a really useful tool that allows you to have multiple images that changes with the viewport width. It saves on writing loads of CSS media-queries for the image!

<picture>
  <source media="(min-width:750px)" srcset="images/image-product-mobile.jpg">

  <img src="images/image-product-desktop.jpg" alt="">
</picture>

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags match

You can find more information: here - w3schools and here - MDN

Let me know how you get on!