product-preview-card-component-main

Hi Mitrandir, great job!

I have some suggestions for improvement that might help you.

• Instead of having one image that is scaled up or down based on the viewport width, you can use <picture> tag. It gives you more flexibility in specifying image resources.

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

• You can use <main> and <section> tags for a better accesibility. The <main> tag specifies the main content of a document. The <section> tag defines a section in a document.

• You forgot to add cursor: pointer; on hover button. The rest looks well.

I hope these are helpful to you.