Perfume product card

Hi BDWNAV, good job putting this together! 😊 I got a few suggestions for you here:

1. I would suggest wrapping the main-div inside the <main>...</main tag as this will semantically helps the code refer main content of the body.
2. Right now the component in the mobile have a stretched image with height that fills in the screen. This could restrict the flexibility of the component and one fix would be to wrap your card into a container class like as follow:

.container{
width: min(80%, 600px); 
/*This will give the card a max width of 600px but will give the elements in it 80% maximum width of the screen (if its below 600px) */
margin-inline: auto; /*Centers the element */
}
.main-div{
min-height: 450px;
padding: 1rem;
/*Now you can remove the width constraint here and the 100% height & width property within the mobile view */ 
}

Then in html

<main class="container">
   <div class="main-div">...</div>
</main>

1. Instead of using the <image/> tag with CSS for handling the switching of the desktop and mobile images, try to use the picture element instead since this is a product image and is thus central to the card.

<picture>
   <source media="(max-width: 375px)" srcset="images/image-product-desktop.jpg" />
   <img src="images/image-product-mobile.jpg" alt="Glass perfume bottle placed against a leafy background" />
</picture>

Hope some of this can help you out, and really great work on the whole, so keep going!