3-column preview card component (HTML + CSS)

Hello, Ahmed! 👋

Congratulations on finishing this challenge! 🎉

I have some suggestions to improve this solution.

• Replace all the h1 with h2. There should not be more than one h1 on a page. Many h1 mean many titles which can confuse the users, especially the screen reader users.
• Learn more — How-to: Accessible heading structure - The A11Y Project
• All the car icons are decorative images. They should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
• For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.

I notice there is --font-size: 15px; custom property that is not used. You may want to remove it. As a side note, avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

Learn more — The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

I hope this helps. Happy coding!