3-column preview card component

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. Make flex-container a <main>.

• The icons are decorative, so the alt text should be empty: alt="". When you do need alt text (on meaningful images), never use words like "image" or "photo" - screen readers automatically recognize it as an image.

• There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

• "Learn More" would navigate to another page, hence it is not a button but a link.

• .attribution should be a <footer>.

• The footer text needs to be wrapped in a <p>.

CSS:

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

• If you want zero margin on the body, write it like this: body { margin: 0; }

• 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.

• line-height must also never be in px. You can use %.

• Remove the widths and heights.

• Add a max-width in rem on the card container, to prevent it from getting too wide on larger screens.

• p has a default value of font-weight: 400, so there is no need for that declaration.

• Media queries should be in rem, not px. Also, it is common practice to do mobile styles first and use media queries for larger screens (min-width instead of max-width).