style.css

:root {
   --bg-card-sedans: hsl(31, 77%, 52%);
   --bg-card-suvs: hsl(184, 100%, 22%);
   --bg-card-luxury: hsl(179, 100%, 13%);
   --light-grey: hsl(0, 0%, 95%);
   --text-color: hsla(0, 0%, 100%, 0.75);
   --font-primary: "Lexend Deca", sans-serif;
   --font-secondary: "Big Shoulders Display", cursive;
}

html {
   box-sizing: border-box;
   font-size: 62.5%;
   height: 100%;
}

* {
   box-sizing: inherit;
   margin: 0;
   padding: 0;
}

body {
   background-color: var(--light-grey);
   font-family: var(--font-primary);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.6;
   min-height: 100vh;
   display: grid;
   place-items: center;
}

.container {
   width: 90vw;
   padding: 5rem 1.5rem;
   margin: 0 auto;
}

.cards {
   width: 100%;
   max-width: 90rem;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   border-radius: 0.7rem;
   overflow-x: hidden;
}

.card {
   flex: 1;
   padding: 4rem;
}

.card-sedans {
   background-color: var(--bg-card-sedans);
}

.card-suvs {
   background-color: var(--bg-card-suvs);
}

.card-luxury {
   background-color: var(--bg-card-luxury);
}

.card-details {
   margin-top: 2rem;
   min-height: 23rem;
}

.card-title {
   color: var(--light-grey);
   text-transform: uppercase;
   font-family: var(--font-secondary);
   font-size: clamp(3rem, 5vw, 3.5rem);
}

.card-description {
   color: var(--text-color);
   margin-top: 2rem;
}

.card-cta {
   margin-top: 3rem;
}

/* Button */
.btn {
   display: inline-block;
   cursor: pointer;
   text-decoration: none;
   appearance: none;
   outline: 0;
   border: 2px solid transparent;
   background-color: var(--light-grey);
   padding: 0.8rem 2.5rem;
   border-radius: 5rem;
   transition: 0.3s ease-in-out;
}

.btn:hover {
   background-color: transparent;
   border-color: var(--light-grey);
   color: var(--light-grey);
}

.btn-orange {
   color: var(--bg-card-sedans);
}

.btn-cyan {
   color: var(--bg-card-suvs);
}

.btn-dark-cyan {
   color: var(--bg-card-luxury);
}

@media screen and (max-width: 850px) {
   .cards {
      max-width: 40rem;
      flex-direction: column;
   }

   .card-details {
      min-height: 16rem;
   }
}

@media screen and (max-width: 576px) {
   .container {
      width: 95vw;
   }
}