@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    /* Primary colors */
    --Bright_orange: hsl(31, 77%, 52%);
    --Dark_cyan: hsl(184, 100%, 22%);
    --Very_dark_cyan: hsl(179, 100%, 13%);

    /* Neutral colors */
    --Transparent_white: hsla(0, 0%, 100%, 0.75); /* paragraphs */
    --Very_light_gray: hsl(0, 0%, 95%); /* background, headings, buttons */
}

body{
    font-family: "Lexend Deca", "Big Shoulders Display", Helvetica, sans-serif;
    Font-size: 15px;
    background-color: var(--Very_light_gray);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.card-component{
    display: grid;
    width: 700px;
    max-width: 100vw;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100%);
    overflow: hidden;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.Sedans{
    background-color: var(--Bright_orange);
    padding: 2.5rem 2rem 1.5rem 2rem;
}

.SUVs{
    background-color: var(--Dark_cyan);
    padding: 2.5rem 2rem 1.5rem 2rem;
}

.Luxury{
    background-color: var(--Very_dark_cyan);
    padding: 2.5rem 1.6rem 1.5rem 2rem;
}

.icon{
    width: 38px;
    height: 25px;
    margin-bottom: 25px;
}

.header{
    color: var(--Very_light_gray);
    transform: scale(1.2,1.5);
    margin-left: 15.5px;
    letter-spacing: 1.5px;
    font-family: "Big Shoulders Display";
    margin-bottom: 1.5rem;
}

.description{
    color: var(--Transparent_white);
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 3rem;
}

button{
    font-family: "Lexend Deca"; 
    margin-bottom: 1rem;
    border: 2px white solid;
    border-radius: 20px;
    padding: 0.5rem 1.2rem;
    background-color: var(--Very_light_gray);
    text-decoration: none;
    color: #000;
    mix-blend-mode: screen;
}

button:hover{
    background: transparent;
    cursor: pointer;
    transition: ease 0.3s;
    color: white;
}

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

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

a:hover{
    color: var(--Bright_orange);
}


@media (max-width: 500px) {
    .card-component{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2rem 1rem;
        width: 70%;
        padding-right: 3rem;
    }

    .description{
        margin-bottom: 1.3rem;
    }

    footer{
        margin-bottom: 1rem;
    }
}