Product preview card component using HTML and CSS

Your site looks pretty good. Your html and css is pretty well organized and easy to follow along. Aside from mobile-responsiveness, one other thing I think you should work on is variables for reusable items. In this case something you used a good bit is the colors. So instead of making a comment at the top of you css to remember what colors and hsl code corresponds to it you should use something like this:

:root{
  /* Primary */
  --dark-cyan: hsl(158, 36%, 37%);
  --cream: hsl(30, 38%, 92%);

  /* Neutral */
  --very-dark-blue: hsl(212, 21%, 14%);
  --dark-grayish-blue: hsl(228, 12%, 48%);
  --white: hsl(0, 0%, 100%);

  --font-theme-montserrat: "Montserrat";
  --font-theme-fraunces: "Fraunces";
}

Then, whenever you want to use one of these variables, for example a color, you do something like this in your css:

color: var(--dark-grayish-blue);

One last thing, I notice that you only import the font theme "Fraunces" and forgot to import "Montserrat". Here is the import statement for that:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');

Hope I was able to help 👍