3 Column card component with CSS Grid

In my point of view, you could use utility classes in your project, despite it being a small component with little need for utility classes, but in the example you used above it would be a good choice.

Think with me:

• The title of your card, in this case the type of car, is much smaller compared to the original design.

• Think about the semantics of the card title, in a large project, what do you think the order of the titles would be? From my point of view, the title could easily be an <h2>, because thinking about the structure of a landing page, it makes more sense to have a larger title for the section and then the subtitle. An example would be the section title: <h1>What type of car to choose?</h1> and then your cards with the subtitles <h2>Sedans</h2>, etc. But remembering that it's interesting not to use too many <h1> on your page, if it's a large project that already has a longer title at the beginning, it makes sense to use an <h2> for the title "What type of car to choose?" and use <h3> for car categories.

• To me it makes more sense for you to declare the font size in the body instead of in the :root element. Doing it this way, you can use em instead of px, because when you set the size of a paragraph 1em, it will inherit from the parent element, which in this case will inherit one by one until it gets the size of 15px of body. An even better way would be to set font-size in the html element, and then you would use rem instead of em when defining font sizes.