style.css

:root{
   --sedans-card: hsl(31, 77%, 52%);
    --suvs-card: hsl(184, 100%, 22%);
    --luxury-card: hsl(179, 100%, 13%);
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body,
button{
    font-family:"Lexend Deca",sans-serif;
   
    
}
.attribution { 
        font-size: 11px;
         text-align: center; 
        }
.attribution a { 
    color: hsl(228, 45%, 44%);
}
h3{
    font-family:"Big Shoulders Display",sans-serif ;
    text-transform: uppercase;
    font-size: 30px;
    
}
p{
    font-size: 15px;
    line-height: 1.6;
}
.btn{
    background-color:#fff;
    border: 2px solid #fff;
    border-radius: 30px;
    padding: 10px 20px;
    cursor: pointer;
    margin-top:30px;
    transition: all 0.4s ease-in-out;
 
}

.sedans-card{
    background-color: var(--sedans-card);
    border-radius: 10px 10px 0 0;
    color: #fff;
}
.sedans-card .btn{
    color:var(--sedans-card);
}
.suvs-card{
    background-color: var(--suvs-card);
    color: #fff;
}
.suvs-card .btn{
    color:var(--suvs-card);
}
.luxury-card{
    background-color: var(--luxury-card);
    border-radius:0 0 10px 10px ;
     color: #fff;
    
}
.luxury-card .btn{
    color: var(--luxury-card);
}
.btn:hover{
    background-color: transparent;
    color: #fff;
}
.card-container{
    padding: 20px;
}
.card{
 padding:30px;
}
.car img{
    margin-bottom: 25px;
}
.card h3{
    margin-bottom: 20px;
}
.car p{
    margin-bottom: 30px;
}
@media (min-width:992px) {
    .card-container{
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        max-width: 900px;
        margin: auto;

    }
    .sedans-card{
        border-radius: 10px 0 0 10px;
    }
    .luxury-card{
        border-radius: 0 10px 10px 0;
    }
    .card{
        padding: 45px;
       
    }
    .car p{
        margin-bottom: 80px;
        
    }
}
@media (min-width:375px)
{
    .card-container{
        min-width: 300px;
        
    }
}