Responsive order summary component using flexbox

Hi, Elizabeth! 👋

Congratulations on finishing your first challenge! 🎉

Regarding your question, I would recommend making the body element as the main wrapper of the card element. After that, set a min-height: 100vh into the body element. This will make sure that it allows to grow if needed (like on mobile landscape view). Then, you can move all the styling from the wrapper element to the body element.

As far as the pattern-background, I would recommend making it the background image of the body element. So, I recommend,

• Setting the position to the top.
• Stopping the background repetition
• Making the size 100%

All of those things can be done using CSS background properties.

A few suggestions.

• Headings must be in a logical order. Users of assistive technology can use heading tags to navigate the website. If headings are not in a logical order, those users might get confused. So, I recommend swapping the h5 with h2 instead.
• I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.

Let me know if you have any questions. I hope this helps!