Product Preview Card

good job i have few suggestions for you

1. avoid use of H1 more than once there should be only one heading in a perticular section
2. use picture element if you wanna switch between images in different divices refer:w3shool picture element
3. <h2 class="pro-cat">P E R F U M E</h2> don't do like this , if you want more gap between letters use letter-spacing instead.
4. <img src="images/icon-cart.svg" alt="cart-icon"> try to put svgs instead of using them in img tag because svg a vector images they form where there code puts in means if you just directly add svg code you will save time to load them as a image from server.

5).pro-cat{ font-size: small; } wrap using <small></small> tag instead

6).new-price{ color:hsl(158, 36%, 37%); }

.old-price{ margin-bottom: 0; font-size: small; text-decoration: line-through; }

button{ width:100%; padding:1rem; background-color: hsl(158, 36%, 37%); }

here you have used hsl(158,36%,37%) 2times , follow DRY principle always use css variables if you think you will use that property more than 1 im giving you an example below: :root{ --color-1:hsl(158,36%,37%); }

now i can use var(--color-1) where i want this color and if in future client wants to change this color to different color so it will be simple easy for me to do this i will just change this color in root part. i hope all suggestions will help you and learn about flex please

You can also use 'border-radius: 15px 50px 30px 5px' - first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)

You can see more here: https://www.w3schools.com/cssref/css3_pr_border-radius.php

I hope can help you that and to make you faster to write!