:root {
    --chl-red: #C42E38;
}

body {
    font-family: 'Roboto', sans-serif;
    display: grid;
    flex: 1;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr auto;
    grid-template-areas: "header" "main" "footer";
}


header {
    grid-area: header;
    position: sticky;
    top: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--chl-red);
    box-shadow: 0 -1px 7px;
    @media (width > 450px) {
        padding-left: 1rem;
        padding-right: 1rem;
        background: linear-gradient(white 35%, var(--chl-red) 0, var(--chl-red) 65%, white 0);
        
    }
    div {
        width: 100%;
        display: flex;
        gap: 1rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        @media (width > 450px) {
            flex-direction: row;
            justify-content: space-between;
        }
        .header-logo {
            width: 100%;
            max-width: 200px;
            @media (width > 600px) {
                max-width: 300px;
            }
        }

        nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            @media (width > 600px) {
                gap: 1rem;
            }
            a {
                text-decoration: none;
                height: 30px;
                line-height: 30px;
                padding: 0 10px;
                font-weight: bold;
                color: white;
                &:first-of-type {
                    display: none;
                    @media (width > 600px) {
                        display: flex;
                    }
                }
            }

            a:hover {
                background-color: white;
                color: black;
            }
        }
    }
}


main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    .hero {
        width: 100%;
        padding: 2rem;
        @media (width > 600px) {
            max-width: 80rem;
        }
        .hero-img {
            background-image: url("https://chl-public-bucket.s3.eu-west-2.amazonaws.com/championHire.hero.kubota.u27.jpg");
            height: 450px;
            width: 100%;
            background-position: 50%;
            background-size: cover;
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            .hero-message {
                line-height: 1;
                font-size: 1.75rem;
                max-width: 75%;
                @media (width > 800px) {
                    font-size: 3.75rem;
                    max-width: 50%;
                }
                font-weight: 700;
                text-align: center;
                background-color: rgba(255, 255, 255, .6);
                padding: 1.5rem;
                border-radius: .5rem;
                &:hover {
                    background-color: rgba(255, 255, 255, .65);
                }
            }
        }
    }
}
.max-w-1000 {
    max-width: 1000px;
}
.max-w-1200 {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
}

.marketing-hp {

    h1 {
        font-size: xx-large;
        line-height: 1;
        text-align: center;
        margin: 2rem;
    }
}

.history-hp {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 10px, 20px, 1fr);
    grid-template-areas: 
    "picture-one"
    "title-one"
    "text-one"
    "picture-two"
    "title-two"
    "text-two"
    "picture-three"
    "title-three"
    "text-three"
    "picture-four"
    "title-four"
    "text-four";
    @media (width > 850px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 20px, 1fr);
        grid-template-areas: 
        "title-one picture-one"
        "text-one picture-one"
        "picture-two title-two"
        "picture-two text-two"
        "title-three picture-three"
        "text-three picture-three"
        "picture-four title-four"
        "picture-four text-four";
    }
    margin: 0 1rem 0 1rem;
    h2 {
        font-size: x-large;
        font-weight: 600;
        text-align: center;
        @media (width > 850px) {
            align-self: flex-end;
            text-align: start;
            &:nth-of-type(odd) {
                text-align: end;
            }
        }
       
    }
    p {
        font-size: large;
        font-weight: 400;
        text-align: center;
        @media (width > 850px) {
            text-align: start;
            &:nth-of-type(odd) {
                text-align: end;
            }
        }
    }
    div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    img {
        border-radius: .5rem;
        transform: rotate(5deg);
        object-fit: contain;
        margin-top: 30px;
        margin-bottom: 30px;
    }
}

#title-one {
    grid-area: title-one;
}
#text-one {
    grid-area: text-one;
}
#picture-one {
    grid-area: picture-one;
}
#title-two {
    grid-area: title-two;
}
#text-two {
    grid-area: text-two;
}
#picture-two {
    grid-area: picture-two;
    img {
        transform: rotate(-5deg);
    }
}
#title-three {
    grid-area: title-three;
}
#text-three {
    grid-area: text-three;
}
#picture-three {
    grid-area: picture-three;
}
#title-four {
    grid-area: title-four;
}
#text-four {
    grid-area: text-four;
}
#picture-four {
    grid-area: picture-four;
    img {
        transform: rotate(-5deg);
    }
}



footer {
    grid-area: footer;
    bottom: 0;
    width: 100%;
    background-color: rgb(241 245 249);
    /* position: absolute; */
    /* bottom: 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;

    .address-block {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin: 0 0 10px 0;
        }

        p:first-child {
            font-weight: bold;
        }
    }

    .associations {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        gap: 10px;

        img {
            width: 100px;
            height: 100px;
        }
    }
}

.card-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.form-signin {
    width: 100%;
    max-width: 600px;
}

.depots {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem;
    align-items: center;
    .depots-section {
        max-width: 1000px;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 2rem;
        .depot-info {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 1rem;
            @media (width > 650px) {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                gap: 2rem;
            }
            @media (width > 850px) {
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 1fr;
                gap: 2rem;
            }
            
            div {
                display: flex;
                flex-direction: column;
                gap: .25rem;
                p {
                    margin: 0
                }
                .inline-info {
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                }
            }
            
        }
        .depot-cta {
            display: flex;
            flex-direction: row;
            gap: 1rem;
        }
    }
}