3-column preview card component using CSS flexbox

Hi there 👋. Good job on completing the challenge ! I have some feedback for you if you want to improve your code.

Regarding your question

• Set the border radius to the entire component, and then clip the overflowing corners with overflow: hidden.

.main-container {
    max-width: 75rem;
    display: flex;
    border-radius: 0.9rem;
    overflow: hidden;
}

HTML:

• You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.: <h1 class="sr-only">3-column preview card component</h1>

• Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

<img src="./images/icon-sedans.svg" alt aria-hidden="true">
<img src="./images/icon-suvs.svg" alt aria-hidden="true" >
<img src="./images/icon-luxury.svg" alt aria-hidden="true" >

CSS:

• Setting the font-size to 62.5% can attract compatibility issues with third-party libraries or plugins. You can read more about this with this two lectures:

1. The Surprising Truth About Pixels and Accessibility - The 62.5% trick
2. A comment on the 62.5% trick

Credit to grace-snow and vanzasetia for pointing this out.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding! 🎄