Order Summary Component

Hello, good job on the challenge! Here are some suggestions.

HTML:

• Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Change .card to a <main>.

• Both the image and the icon are decorative, so their alt text should be empty:alt="".

• Footer text should be wrapped in a <p>.

CSS:

• It's good practice to include a CSS Reset at the top.

• font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

• Remove the fixed width on the card. If needed, add a max-width in rem.

• Media queries should be in rem, and it is common practice to do the mobile styling as the default.