Responsive product card component using Flexbox and CSS Grid

Hi Carlos 👋

I think it's best using flexbox to align the cart icon and text "Add to cart". I can't think of another solution. Using grid would be overkill.

I don't know what to say. Your solution is close to perfect to be honest. But if you really want to take the extra mile, try this:

• Remove height: 100vh; from body as it will render body's padding useless when the screen height is shorter than the card. Even the top part of the card will be hidden from the page.
• alt="Image of Gabrielle Essence Eau de Parfum" could be replaced by a more describing text, for example alt="A bottle of Gabrielle Essence Eau de Parfum". I don't think Image of is needed here. Check this article on w3schools for the explanation.
• Instead of using text-decoration: line-through; for <span class="card__real-price">$169.99</span>, you can use <s>$169.99</s> to give them more meaning. Read more about <s> tag element here

Hope this helps. Happy coding!