@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Inter:wght@400;700&family=Lexend+Deca&family=Outfit:wght@300;400;600&family=Red+Hat+Display:ital,wght@0,500;0,700;0,900;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Inter:wght@400;700&family=Lexend+Deca&family=Outfit:wght@300;400;600&family=Red+Hat+Display:ital,wght@0,500;0,700;0,900;1,500;1,700;1,900&display=swap');

:root{
    /*Primary*/
    --bright-orange:hsl(31, 77%, 52%);
    --dark-cyan:hsl(184, 100%, 22%);
    --very-dark-cyan:hsl(179, 100%, 13%);
    /*Neutral*/
    --transparent-white:hsla(0, 0%, 100%, 0.75);
    --very-light-gray:hsl(0, 0%, 95%);
}

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

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

main{
    width: 100vw;
    height: 100vh;
    background-color: var(--very-light-gray);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}

.card{
    width: 70%;
    height: 60%;
    border-radius: 8px;
    display: grid;
    grid-template-columns: 33.3% 33.3% 33.3%;
    color: var(--transparent-white);
    
}

.card div{
    display: flex;
    
    flex-direction: column;
    
    padding: 2.5rem;
    
}



.logo{
    background-size:contain;
    background-repeat: no-repeat;
    width: 0.7rem;
    height: .1rem;
    
}

article{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 60%;
}

article h1{
    font-weight: 700;
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: 45px;
    font-weight: 700;
}

article p{
    
    font-family: 'Lexend Deca';
    font-size: 15px;
    font-weight: 400;
}


.left{
    background-color: var(--bright-orange);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    
}

.sedan{
    background-image: url(/images/icon-sedans.svg);
}

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

.suv{
    background-image: url(/images/icon-suvs.svg);
}

.right{
    background-color: var(--very-dark-cyan);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.luxury{
    background-image: url(/images/icon-luxury.svg);
}

button{
    height: 2.5rem;
    width: 10rem;
    border-style: none;
    justify-content: end;
    background-color: var(--very-light-gray);
    border-radius: 20px;
    font-family: 'Lexend Deca', sans-serif;
}

button:hover{
    border: 2px solid ;
    
}

.left button{
    color: var(--bright-orange);
    
}

.left button:hover{
    background-color: var(--bright-orange);
    color: var(--very-light-gray);
}

.centre button{
    color: var(--dark-cyan);
}

.centre button:hover{
    background-color: var(--dark-cyan);
    color: var(--very-light-gray);
}

.right button{
    color: var(--very-dark-cyan);
}

.right button:hover{
    background-color: var(--very-dark-cyan);
    color: var(--very-light-gray);
}