product preview card component

Congratulations on completing the challenge. Your page looks good so far. Your html is very clean and readable, and your css very organized. That said, I have a few suggestions.

First, your "container" class has both flex-direction: column and flex-direction: row. You should remove the first and keep the second.

Next, it is good practice to keep the css DRY (don't repeat yourself). If you move font-family: Montserrat; font-weight: 500; to the body element, you can remove the other references to Montserrat. Similarly, since .productBrand and .price share common styles, you could combine the common styles and then style the differences:

.productBrand, .price{
  font-size: 27px;
  font-weight: 700;
  font-family: Fraunces, sans-serif;
}

.productBrand{
    margin-left: 20px;
    line-height: 1;
    margin-bottom: 10px;
}

.price{
    color: var(--Dark_cyan);
    margin-left: 20px;
}

Lastly (this is being picky, but...) the line breaks in the h1 are awkward. "Eau De Parfum" is one word in french. Eau should be behind the last <br /> next to De Parfum.

The next step is to make the page responsive. You will need to research ways of centering your content without using position: absolute. One way is to use flexbox, the other is to use grid. Check out other people's solution to this challenge to see what I mean.

Hope this helps, and keep on coding.