Product preview card component using CSS grid and media query

Hi! I love your use of HTML semantics and comments

Here's a little feedback to help you improve making the design a little closer!

1. You can align the whole product card to the center by potentially doing body { display:flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh} Because since there is only essentially two children in the body (product card and 'challenge done by' div) you'll be able to center it!
2. Removing the padding in .product {} to give you the perfect solution look!

Hope this helps! Happy developing! :)