Used flex and variables

Hello there 👋. Good job on completing the challenge !

I have some feedback for you if you want to improve your code.

HTML 📄:

• Use the <main> tag to wrap all the main content of the page instead of the <section class="card"> tag. With this semantic element you can improve the accessibility of your page.

• You could use the <del> tag to indicate the price that was before the discount. Additionally, you can use a sr-only class to describe the discount. This will help screen reader users to understand that the price was discounted.

  Example: <del><span class="sr-only">Old price: </span>$169.99</del>

CSS 🎨:

• At the moment, your solution has not been adapted for mobile devices :(

• Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 700px to make sure that the component will have a maximum width of 700px on any device, also remove the width property with a percentage value.

• Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. This can cause accessibility issues for users who have set their browser to use a larger font size. You can read more about this here 📘.

I hope you find it useful! 😄

Happy coding!