product preview card

oh wow, thanks alot.

Congratulations well done. There is a problem with your CSS the media query is not responding after taking a look at it, it seems there is a small mistake.

You need to add a space between and and (). If you fix this your mobile version if fine

@media only screen and(max-width:550px) {
.card{
margin-top: 1rem;
margin-bottom: 1rem;
}
.image-container{
width: 100%;
height: 40%;
}
.image-container img{
content: url("images/image-product-mobile.jpg");
}
.perfume{
width: 100%;
}
.perfume .name{
padding-right: 0;
}
.card{
flex-direction: column;
}
.image-container img{
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0px;
}
}

In the CSS you also have the font-family in multiple places. You don't have to do that, just add the font-family on the body and it will apply to the entire page.

body{
font-family: Montserrat, Fraunces;
background-color:  var(--cream);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.perfume .description{
font-family: montserrat; /* remove this line */
font-size: 14px;
color: var(--dark-grayish-blue);
line-height: 22px;
margin-bottom: 1.75rem;
}

.title{
font-family: montserrat; /* remove this line */
letter-spacing: 3px;
font-size: 14px;
color: var(--dark-grayish-blue);
margin-bottom: 1.7rem;
}

.price-tags .old-price{
font-family: montserrat; /* remove this line */
color: var(--dark-grayish-blue);
}