:root {
    --Bright-orange: hsl(31, 77%, 52%);
    --Dark-cyan: hsl(184, 100%, 22%);
    --Very-dark-cyan: hsl(179, 100%, 13%);
    --Transparent-white-paragraphs: hsla(0, 0%, 100%, 0.75);
    --Very-light-gray-background-headings: hsl(0, 0%, 95%);
}

@font-face {
    font-family: Big Shoulders Display;
    src: url(https://fonts.google.com/specimen/Big+Shoulders+Display);
    font-weight: 700;
}

@font-face {
    font-family: Lexend Deca;
    src: url(https://fonts.google.com/specimen/Lexend+Deca);
    font-weight: 400;
}

body {
    background-color: var(--Very-light-gray-background-headings);
    min-height: 100vh;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: 'Lexend Deca', sans-serif;
}


main {
    width: 70%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0px;
    align-items: stretch;
    justify-content: center;
    min-height: 50vh;
}


section {
    display: flex;
    flex-direction: column;
    grid-area: 24px;
    padding: 64px;
    align-items: start;
    justify-content: center;
    background-color: aquamarine;
}

.sedans {
    background-color: var(--Bright-orange);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.suvs {
    background-color: var(--Dark-cyan);
}

.luxury {
    background-color: var(--Very-dark-cyan);
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}




button {
    background-color: var(--Very-light-gray-background-headings);
    height: 40px;
    border-radius: 24px;
    font-size: 16px;
    margin-top: 80px;
    border: none;
    padding: 8px 32px;
    font-weight: 400;
}

button:hover {
    background-color: transparent;
    border: 3px solid var(--Transparent-white-paragraphs);
    color: var(--Very-light-gray-background-headings);
}

.sedans button:hover, .suvs button:hover, .luxury button:hover {
    color: var(--Very-light-gray-background-headings);
}

.sedans button {
    color: var(--Bright-orange);
}

.suvs button {
    color: var(--Dark-cyan);
}

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

section h3 {
    text-transform: uppercase;
    font-size: 32px;
    color: var(--Very-light-gray-background-headings);
}


section p {
    line-height: 24px;
    font-size: 16px;
    color: var(--Transparent-white-paragraphs);
    width: 80%;
    word-spacing: 2px;
}


@media screen and (max-width: 767px) {
    main {
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
    }
    
    
    section {
        display: flex;
        padding: 32px;
    }
    
    .sedans {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 0px;
    }
    

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



    button {
        
        border-radius: 24px;
        margin-top: 16px;
        padding: 8px 24px;
    }


    section p {
        line-height: 24px;
        width: 100%;
        letter-spacing: 1;
    }
    
    
}