3 Column Preview Card Component

Hey @originalboss. Congrats on completing the challenge, and of course there is always room to improve our code, so I think you will find the following helpful:

About your question

I know how confusing it can be when learning something for the first time, especially when it comes to BEM. Actually, BEM stands for Block Element Modifier. Let's consider the following code:

<div class="card card--sedan">
  <img class="card__image" src="" alt=""/>
  <h2 class="card__title">Sedans</h2>
  <p class="card__description">some description here</p>
  <button class="card__btn">learn more<button>
<div>

So the card class is the block, card__image,card__title,card__description,card__btn are the elements because they all depend on the block class and the card--sedan is the modifier, so in your CSS file you could style the background of the card using the modifier. For example: Using the design in this challenge, you could use the card class to style all the common styles and their modifier to style the background color.

.card--sedan {
background-color: orange:
}

.card--suv {
background-color: blue;
}

and so on.

If you want to dive deep into the BEM naming convention, check out their docs -> BEM docs