body main {

    section {
        grid-column: span 3;

        &:nth-child(5) {
            grid-column: 1 / -1;
        }

        & > div {

            p {
                text-align: start;
            }
        }

        &.map {

            #map {
                height: 50vh;
                width: 100%;
            }
        }

        &.socials {

            div {
                display: flex;
                flex-direction: column;
                gap: 0;

                a {
                    text-transform: capitalize;
                }
            }
        }

        &.contact-form{
            grid-column: span 6;

            form{
                display: grid;
                grid-template-columns: subgrid;

                .honeypot{
                    display: none;
                }

                input:not([type="submit"]), textarea{
                    background: none;
                    border: none;
                    border-radius: calc(var(--unit_px) * 1);
                    background: var(--blanc);
                    padding: calc(var(--baseline) * 2);
                    font-family: "Clarendon", serif;
                    width: 100%;
                    font-size: var(--taille_typo_moyenne);
                    line-height: var(--hauteur-ligne_moyenne);
                }

                input::placeholder, textarea::placeholder{
                    color: var(--gris_leger);
                }

                textarea{
                    resize: none;
                    height: calc(var(--hauteur-ligne_moyenne) * 4);
                }

                .field:nth-of-type(2){
                    grid-column: span 2;
                }

                .field:nth-of-type(3){
                    grid-column: span 3;
                }

                .field:nth-of-type(4){
                    grid-column: span 6;
                }

                .field:last-of-type{
                    grid-column: span 6;
                }
            }
        }
    }
}

/*-------------------------------------------------------------------------*/

@media (max-width: 1080px) {

    body main {
        grid-template-columns: repeat(6, 1fr);
        column-gap: calc(var(--baseline) * 4);

        section {
            grid-template-columns: subgrid;
            align-content: start;

            h1, & > *:not(h1) {
                grid-column: 1 / -1;
            }

            p {
                text-align: start;
            }

            &.contact-form form {

                .field:nth-of-type(2) {
                    grid-column: span 3;
                }

                .field:nth-of-type(3) {
                    grid-column: span 3;
                }
            }
        }
    }
}

/*-------------------------------------------------------------------------*/

@media (max-width: 768px) {

    body main {

        section {
            grid-column: 1 / -1;

            &.contact-form form {

                .field, .field:nth-of-type(2), .field:nth-of-type(3), .field:nth-of-type(4), input[type="submit"] {
                    grid-column: 1 / -1;
                }
            }
        }
    }

}