Responsive stat card with flexbox and media queries

Hey @blpeters 👋🏻

I have some suggestion to help you fix the accessibility and HTML issues.

• Instead of giving body this role="main", do this, change, <div class="">...</div> to <main class="">...</main>. Also, remove role='contentinfo' because <footer> tag is enough for the screen reader to determine the content in it.
• Next, instead of <section>, I suggest using regular <div> for a couple of reasons. First, when you use a <section> you have to have a heading, like h1-h6. Next, <section> is for bigger parts of layout, such as, contact us about us, image gallery, etc.

These will fix the most of the accessibility issues. Don't forget to generate a new repot once you fix the issues.

I hope this was helpful 👨🏻‍💻 overall, you did a great job, well done. Cheers 👾

On my desktop monitor, about 1920 px wide, the component seems like it gets too wide compared to provided design. I sometimes find I can use the max-width property on the appropriate container, to limit how wide an element can get on bigger screens. max-width will still let it be responsive, but it will reach that limit you set and not get any bigger.