CSS Flex, CSS variables, Media queries, Responsive Web Development

Hi Cindy! your project looks great, but i have one suggestion for you:

• Use <picture> tag insted of <section> for wraping all of your pictures.

Insted of this:

<section>
      <img src="images/image-product-desktop.jpg" class="product-image" alt="Perfume image Gabrielle channel">
</section>

Do this:

<picture>
        <source media="(max-width:800px)" srcset="images/image-product-mobile.jpg">
        <img src="images/image-product-desktop.jpg" class="product-image" alt="Perfume image Gabrielle channel">
</picture>

This will help you with changeing pictures from desktop to mobile version. Instead of having one image that is scaled up or down based on the viewport width, you can use multiple images.

If you found this helpful please mark it as such :)

Thank you so much for this, I went down the tunnel of such semantics and I learnt a lot, highly appreciate