/* *********************** */
/* min-width: 75.000em     */
/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 75.000em) {
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 12em 45em 25em 29em 14em 43em 58em auto auto;
        grid-template-areas: "header header header header" "tagline tagline tagline tagline" "brandcontent brandcontent brandcontent brandcontent" "representation representation representation representation" "portfolio portfolio portfolio portfolio" "contact contact contact contact" "about about about about" "footer footer footer footer";
    }

    .gridLogo {
        grid-column: 3 / span 2;
    }

    .gridNav {
        grid-column: 8 / span 3;
        margin-left: 3.25em;
    }

    .navLink a {
        font-size: 1.5em;
    }

    .taglineArticle {
        grid-template-rows: repeat(16, 1vw 7em 15em);
        max-height: 31.25vw;
        grid-row-gap: 3.5em;
    }

    .brandArticle {
        grid-template-columns: 10% 20% 20% 20% 20% 10%;
        grid-template-rows: 4.75em 17em 2em;
        grid-column: 1 / span 12;
        max-height: 33vw;
        grid-row-gap: 0.75em;
    }

    .representArticle {
        grid-template-columns: 20% 15% 15% 15% 15% 20%;
        grid-template-rows: 5em 15em 8em;
        max-height: 72%;
        grid-row-gap: 0.5em;
        grid-column: 1 / span 12;
        grid-row: 4 / span 2;
        padding-top: 5.75em;
        margin-top: 3em;
    }

    .portfolioArticle {
        grid-template-columns: repeat(3, 1fr);
        max-height: 33vw;
        grid-row-gap: 3.5em;
        grid-column-gap: 3.5em;
        grid-column: 1 / span 12;
        grid-row: 6;
        margin-top: 1em;
    }

    .contactArticle {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(2, 1fr);
        max-height: 33vw;
        grid-row-gap: 3.5em;
        grid-column-gap: 3.5em;
        grid-column: 1 / span 12;
        grid-row: 7;
        margin-top: 1em;
        padding-top: 5.75em;
    }


    .aboutArticle {
        grid-column: 1 / span 4;
        grid-row: 8;
        grid-column-gap: 2em;
        grid-row-gap: 1em;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-top: 5em;
    }

        .aboutArticle h2 {
            text-align: left;
        }

    .taglineArticle h2 {
        font-size: 2.2em;
        grid-column: 4 / span 6;
        grid-row: 4;
    }

    .taglineArticle h1 {
        grid-column: 2 / span 10;
        font-size: 2.95vw;
        justify-self: center;
    }

        .taglineArticle h1 span {
            font-size: 2.22vw;
            line-height: 1.75em;
        }

    .button-cta {
        grid-column: 9 / span 2;
        grid-row: 3;
        font-size: 1.15em;
        justify-self: center;
        padding: 1em 1.55em;
    }

    .brandArticle h2,
    .representArticle h2 {
        grid-column: 2 / span 4;
    }

    .brandDescription {
        grid-row: 2;
        justify-self: center;
        align-self: start;
    }


    .brandDescriptionCulture {
        grid-column: 2;
    }

    .brandDescriptionCommunication {
        grid-column: 3;
    }

    .brandDescriptionImpact {
        grid-column: 4;
    }

    .brandDescriptionVision {
        grid-column: 5;
        justify-self: start;
    }

    .brandContentBox {
        grid-row: 2 / span 2;
        grid-template-rows: 5em 3.75em 5em;
        margin-right: 2em;
    }

    .brandContentBox1 {
        grid-column: 2;
        justify-content: end;
    }

    .brandContentBox2 {
        grid-column: 3;
    }

    .brandContentBox3 {
        grid-column: 4;
    }

    .brandContentBox4 {
        grid-column: 5;
    }

    .brandMountain {
        grid-column: 2 / span 4;
        grid-row: 3;
        width: 75%;
        justify-self: center;
        max-width: 605px;
    }

    /*** ABOUT ***/

    .aboutText {
        grid-row: 1;
        grid-column: 3 / span 2;
        align-self: center;
    }

    .aboutText p {
        font-size: 1.05em;
        color: #5a6670;
    }

    .aboutImg {
        grid-row: 1;
        grid-column: 1 / span 2;
    }


    /*** PORTFOLIO ****/

    .portfolioGrid, .aboutGrid {
        display: grid;
        grid-column: 1 / span 3;
        grid-row: 2;
        grid-row-gap: 1em;
        grid-template-columns: repeat(3, 1fr);
    }

    /*** FORM ****/

    .formContact {
        grid-column: 3 / span 8;
        grid-row: 2;
        color: #fff;
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    .formContact > * {
        padding: 2em;
    }

    .company-info h3, .company-info ul, .brand {
        text-align: left;
    }

    .company-info li {
        font-size: 1.05em;
    }
}