Product Card Component with CSS Grid

What I learned:

I found an easy way to darken and/or lighten a color in scss variables. With the lighten() and darken() function you can easily transform the current color in a darker or lighter shade. For this challenge I needed to darken the background-color of the button in the hover state. I have included a lighter mode in the snippet below as a note to myself. You can increase the darkness or brightness with the percentage.

$dark_cyan: hsl(158, 36%, 37%);
$dark_cyan_darker: darken($dark_cyan, 10%);
$dark_cyan_lighter: lighten($dark_cyan, 10%);