Responsive Product card with CSS and HTML

Hi Orlando, great work! The design matches the mockup nicely. I've noticed a few things however that are worth mentioning:

• In your markup, your img alt doesn't have a value. Also, in relation to this, your images should be handled with the <picture> element with paths to both the mobile and desktop versions, which change depending on a specified viewport width. Here's a link from MDN on how to achieve this Link
• Because of the explicit margin values you've set globally, your content shifts to the left at viewport widths <= 789px. If you remove these values and replace it with 0 auto across all widths, this will centralise your .card horizontally.
• Avoid using id for elements as these are a higher specificity, which makes it difficult to style with classes and often ends up involving overriding them
• Locally host your Google Fonts for privacy and performance reasons. Here's a good link explaining how to do this Link
• Your font-size value should be in rem not px for accessibility reasons. Here's a link explaining in further detail Link

Hope this helps!

just make the body flex and center the card.