Mobile first approach using FlexBox

Great job on this challenge! You've done really well making it look like the design, and it's responsive too, which is good.

There are some minor tweaks that you could make, however.

I noticed that when hovering over the button, the card shifts a bit.

I believe this is happening because you removed the default border from the button, but then you add a border when the user interacts with the button. The added height of the border causes the card's height to increase as well.

You can fix this by simply moving the border style to the button:

button {
  border: 1px solid hsl(0, 0%, 95%);
}

Since the border colour is the same as the button's background colour when it's not being interacted with, it blends in, so you can't tell that there's a border there.

To make it even more obvious that it's a clickable object, you could change the cursor type when the user hovers over a button:

button {
  cursor: pointer;
}

I also noticed that you manually set each button's background colour to that of its respective card, but since they're the same, you can just set it to its default value, which is transparent:

button:hover,
button:focus-visible {
  background-colour: transparent;
}

Finally, this is a very minor thing, but I noticed the slight typo of 'SUVs' instead of 'SUVS' in the middle card.

Other than that, this is a really good solution!

Hope this has been helpful! :)