.grid-container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto auto auto auto;
    grid-template-areas:
        "nav nav nav nav"
        "main main header header"
        "section1 section1 section2 section3"
        "section4 section4 section4 section4"
        "section5 section5 section5 section5"
        "section6 section6 section6 section6"
        "section7 section7 section7 section7"
        "section8 section8 section8 section8"
        "footer footer footer footer";
}

main {
    grid-area: main;
    margin-top: 4rem;
    padding: 10% 10%;
    background-color: #dd5818;
    color: #ffffff;
}

.grid-container main p {
    margin-top: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.8rem;
    font-weight: 200;
}

.grid-container header {
    grid-area: header;
    margin-top: 4rem;
}

.grid-container header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-container .section1 {
    grid-area: section1;
 }

.grid-container .section1 img {
    grid-area: section1;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

.grid-container .section2 {
    grid-area: section2;
    padding: 10% 10%;
    color: #e15932;
}

.grid-container .section2 p {
    line-height: 2rem;
}

.grid-container .section3 {
    grid-area: section3;
}

.grid-container .section3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

.grid-container .section4 {
    grid-area: section4;
    padding: 3% 4%;
    background-color: #fbdccd;
}

.grid-container .section4 h2 {
    color: #e15932;
}

.grid-container .section4 ul {
    margin: 0.5rem 0 1rem 1.2rem;
    font-size: 1.1rem;
    line-height: 2rem;
    letter-spacing: 0.07rem;
}

.grid-container .section5 {
    grid-area: section5;
    padding: 3% 4%;
}

.grid-container .section5 h2 {
    color: #e15932;
}

.grid-container .section5 ul {
    margin: 0.5rem 0 1rem 1.2rem;
    font-size: 1.1rem;
    line-height: 2rem;
    letter-spacing: 0.07rem;
}

.grid-container .section6 {
    grid-area: section6;
}

.grid-container .section6 img {
    float: left;
    width: 50%;
    height: auto;
}

.grid-container .section7 {
    grid-area: section7;
    padding: 3% 4%;
}

.grid-container .section7 h2 {
    color: #e15932;
}

.grid-container .section7 ul {
    margin: 0.5rem 0 1rem 1.2rem;
    font-size: 1.1rem;
    line-height: 2rem;
    letter-spacing: 0.07rem;
}

.grid-container .section8 {
    grid-area: section8;
    padding: 3% 4%;
    background-color: #fbdccd;
}

.grid-container .section8 h2 {
    color: #e15932;
}

.grid-container .section8 ul {
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 2rem;
    letter-spacing: 0.07rem;
}

.grid-container .section8 ul li {
     display: flex;
     flex-flow: row;
     justify-content: flex-start;
     align-items: center;
     margin-bottom: 1.2rem;
}

.grid-container .section8 ul li img.dbl-logo {
    width: 6rem;
    height: auto;
    margin-right: 1rem;
}

.grid-container .section8 ul li img.slwl-logo {
    width: 5rem;
    height: auto;
    margin-right: 2rem;
}

.grid-container .section8 ul li img.aphasie-logo {
    width: 2rem;
    height: auto;
    margin-right: 5rem;
}

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

    .grid-container {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "nav"
            "header"
            "main"
            "section1"
            "section2"
            "section3"
            "section4"
            "section5"
            "section6"
            "section7"
            "section8"
            "footer";
    }


    .grid-container nav .logo-wrapper {
        position: static;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: 0.5rem 0 0 0;
    }

    .grid-container nav ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 0 1.5rem;
        margin: 0.5rem 0 0.5rem 0;
    }

    .grid-container main {
        margin-top: 0rem;
    }

    .grid-container header {
        margin-top: 6rem;
    }

    .grid-container .section2 {
        padding: 5% 5%;
    }

    .grid-container header .header-text h1 {
        font-size: calc(2vw + 2rem);
        line-height: 3.5rem;
        hyphens: auto;
    }

    .grid-container .section2 .section-text h2 {
        font-size: calc(2vw + 1.5rem);
        letter-spacing: 0.2rem;
    }

    .grid-container .section2 .section-text ul {
         justify-content: center;
     }

    .grid-container .section2 .section-text ul li {
         padding-top: 1.5rem;
     }
}