Responsive Product Preview Card Using HTML/CSS

Well done, your code is really good! Nice use of CSS variables.

I would suggest the use of the picture tag for the images:

<picture>
      <source media="(min-width:768px)" srcset="./images/image-product-desktop.jpg">
      <img src="./images/image-product-mobile.jpg" alt="Image product" />
</picture>

And the use of button, which I think has the correct semantic, instead of a div with the btn class.