Responsive Product Card

I received some feed earlier today that I found helpful, so I gonna copy it here.

--variables: don't use color name for your variable

:root{
   --Dark-Cyan: hsl(158, 36%, 37%);
   --Cream: hsl(30, 38%, 92%);
   --Very-Dark-Blue: hsl(212, 21%, 14%);
   --Dark_Grayish-Blue: hsl(228, 12%, 48%);
   --White: hsl(0, 0%, 100%)
}

what happened when your designer calls you and he will tell you that he wants color of the background change it to pink?

--Cream: pink;

It's better to names like this: primary, secondary, link-color, header-color, bg-color, text-color and so on.

--bg-color: hsl(30, 38%, 92%);