body {
    font-size: 15px;
    font-family: 'Lexend Deca';
}

.container {
    display: flex;
    margin: 60px 140px 20px 140px;

}

.card {
    color: hsl(0, 0%, 100%);
    border:  0px solid;
    padding: 40px 50px;
    font-weight: 100;
}

.heading {
    font-size: 50px;
    font-family: 'Big Shoulders Display';
    font-weight: 700;
    padding: 40px 0px;
    letter-spacing: 2px;
    /* font-size: 1.5em;
    transform: scale(1, 2); */
}

.sedans {
    background-color: hsl(31, 77%, 52%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 10px;

}

.suvs {
    background-color: hsl(184, 100%, 22%);

}

.luxury {
    background-color: hsl(179, 100%, 13%);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
}

.mid-text {
   word-spacing: 5px;
}

.learn {
    border-radius: 30px;
    background-color: hsl(0, 0%, 100%);
    margin: 40px 100px 40px 0px;
    padding: 15px;
    text-align: center;
}

.learn:hover {
    border: 1px solid hsl(0, 0%, 100%) ;
    color:hsl(0, 0%, 100%);
}

.sedan-learn {
    color: hsl(31, 77%, 52%);
    border: 1px solid hsl(0, 0%, 100%) ;
    

}

.sedan-learn:hover {
    background-color: hsl(31, 77%, 52%);

}

.suv-learn {
    color: hsl(184, 100%, 22%);
    border: 1px solid hsl(0, 0%, 100%) ;

}

.suv-learn:hover {
    background-color: hsl(184, 100%, 22%);

}

.luxury-learn {
    color: hsl(179, 100%, 13%);
    border: 1px solid hsl(0, 0%, 100%) ;

}

.luxury-learn:hover {
    background-color: hsl(179, 100%, 13%);

}

.grid {
    border-radius: 30px;
    background-color: hsl(184, 100%, 22%);
    color: hsl(0, 0%, 100%);
    margin: 70px 0px; 
    width: 220px;
    padding: 20px 15px;
    text-align: center;
    margin: auto;
}

.grid:hover {
    background-color: hsl(184, 54%, 35%)
}

a {
    text-decoration: none;
    color: hsl(0, 0%, 100%);
}

.responsive {
    margin-top: 10px;
    width: 260px;
    margin-bottom: 30px;
}

 @media all and (max-width: 968px) {

    .container{
        display: flex;
        flex-direction: column;
        margin: 80px 120px 20px 120px;

    }       

    /* .grid {
        grid-template-areas: 'sedans' 'suvs' 'bio';
        
    } */

    .sedans {
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
    }

    .luxury {
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
    }


}

@media all and (max-width: 560px) {

    .container{
        display: flex;
        flex-direction: column;
        margin: 80px 60px 20px 60px;

    }      

}

@media all and (max-width: 455px) {

    .container{
        display: flex;
        flex-direction: column;
        margin: 40px;

    }     
    
    .learn {
        margin: 40px 60px 40px 0px;
    }

}