Responsive 3 Column Preview Card Component

Hey, congratulations on finishing this challenge!

Here are some suggestions to improve your solution even further - I hope it helps :)

HTML:

• The icons are decorative, meaning the alt text should be empty: alt="".

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

• The headings should be written with normal capitalization: "Sedans", "Suvs", and "Luxury". You then use text-transform: uppercase to change the capitalization in CSS.

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

CSS:

• Including a CSS Reset at the top is good practice.

• I like to add 1rem of padding on the body, to ensure the card container doesn't touch the edges on small screens.

• To center the card container horizontally and vertically, I would use Flexbox on the body:

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;

• Remove all widths and heights.

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

• Remove the margin on the card container.

• Remove position: relative, it is not needed in this challenge.

• I prefer to use rem instead of em. The vital thing is to never set the font size in px.

• Remember to add a fallback font:font-family: 'Lexend Deca', sans-serif; and font-family: `Big Shoulders Display`, sans-serif;.

• It is common to have the mobile styles as the default, which means media queries should be min-width. They must also be in rem or em instead of px.

• For this challenge, I would consider using Grid, as that's the most efficient tool when you want equal columns:

.container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (width > 50rem) {
  grid-template-columns: 1fr 1fr 1fr;
}