3-column preview card for responsive layout design

Hello @samoina,

Firstly, great job on the code! It's evident that you've put great effort and thought into this, it really shows. 😃

I had to have a really good look to find where I could offer some constructive and helpful feedback. Below are a couple of areas I found that could benefit from some tweaks:

Button Hover Issue:

There seems to be a layout shift when hovering over the button due to the border being added. A simple fix is to move or include the same border width in the button's base state to maintain size consistency.

Original Code:

button {
	font: inherit;
	padding: 1rem;
	border: none;
	border-radius: 3rem;
	background-color: var(--very-light-gray);
}

button:hover {
	border: 2px solid white;
	cursor: pointer;
	color: var(--very-light-gray);
}

Refactored To Fix layout height change on button:hover :

button {
	font: inherit;
	padding: 0.5rem 1rem;       /* Similar To The Design */
	border: 2px solid white;    /* Moved from :hover to base state */
	border-radius: 3rem;
	background-color: var(--very-light-gray);
}

button:hover {
        cursor: pointer;
	color: var(--very-light-gray);
        background-color: inherit;
}

CSS Refactoring for Button Hover Background Color:

Rather than setting individual background colors for each button on hover, it's possible to streamline the code with inheritance. This can help reduce redundancy.

Original Code:

.button__sedans:hover {
	background-color: var(--bright-orange);
}

.button__suvs:hover {
	background-color: var(--dark-cyan);
}

.button__luxury:hover {
	background-color: var(--very-dark-cyan);
}

Can be refactored down to:

.button:hover {
    background-color: inherit;
}

Again, well done on the coding. These are just some suggestions to further refine it. Looking forward to seeing more of your work in the future! 💻