@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    background-color: hsl(0, 0%, 95%);
    padding: 10px;
    overflow-x: hidden;
}
.card {
    display: flex;
    flex-direction: row; 
}
.card__item {
    width: 100%;
    max-width: 326px;
    padding: 50px;
}
.sedans{
    background-color: hsl(31, 77%, 52%);
    border-radius:10px 0 0 10px ;
}

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

.luxury{
    background-color:hsl(179, 100%, 13%);
    border-radius: 0 10px 10px 0;
}
.logo {
    margin-bottom: 25px;
}
.desc {
    display: flex;
    flex-direction: column;
}
.desc h1{
    color: hsl(0, 0%, 95%);
    font-family: 'Big Shoulders Display', cursive;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: 30px;

}

.desc h2{
    color: hsl(0, 0%, 95%);
    font-family: 'Big Shoulders Display', cursive;
    text-transform: uppercase;
    margin-bottom: 25px;
    font-size: 30px;
}

.desc>p {
    color: hsla(0, 0%, 100%, 0.75);
    font-family: 'Lexend Deca', sans-serif;
    line-height: 1.5;
}

.more{
    margin-top: 100px;
}

.more>a{
    font-family:'Lexend Deca', sans-serif; 
    padding: 10px 30px;
    background-color: hsl(0, 0%, 95%);
    text-decoration: none;
    border: 2px solid hsl(0, 0%, 95%);
    border-radius: 20px;
}
.orange{
    color: hsl(31, 77%, 52%);
}
.cyan{
    color: hsl(184, 100%, 22%);
}
.dark_cyan{
    color: hsl(179, 100%, 13%);
}

.more>a:hover{
    background-color: transparent;
    color: hsla(0, 0%, 100%, 0.75);
    transition: all .2s linear;
}

.attribution { 
    margin-top: 15px;
    font-size: 11px; 
    text-align: center; 
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}

@media screen and (max-width: 780px){

    .card__item{
        padding: 35px;
    }

    .more{
        margin-top: 80px;
    }
    .more>a{
        padding: 10px 20px;
    }

}

@media screen and (max-width: 630px){

    .card{
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    
    .card__item{
        max-width: 470px;
    }

    .more{
        margin: 50px 0 25px 0 ;
    }

    .sedans{
        border-radius:10px 10px  0 0 ;
    }
    
    .luxury{
        border-radius: 0 0 10px 10px;
    }

}