Product preview card using CSS Flex and Grid

What are you most proud of, and what would you do differently next time?

• Use of grid to create the layout, which lead to writing less code
• Using linear-gradient to create the active state, based on the green color from the style guide
• Would pay more attention to centering the content, to avoid reworks

What challenges did you encounter, and how did you overcome them?

• Replacing the image on breakpoint, for mobile devices - couldn't make use of the `` tag, so I added both images into the html tree and toggled the display: none property as needed.
• Not having a darker shade of green in the style guide, for the active state - I used a linear gradient to achieve the effect:

.content-btn:active,
.content-btn:hover,
.content-btn:focus {
  cursor: pointer;
  background-image: linear-gradient(
    to bottom,
    hsl(158, 36%, 37%) 0%,
    hsl(158, 36%, 17%) 0%
  );
}

What specific areas of your project would you like help with?

Not sure what else I need here. Maybe a more efficient way of replacing images on breakpoints.