.document {
    --colonnage: 2 / -1;
    display: grid;
    grid-template-columns: subgrid;

    .edito {
        grid-column: 1 / 4;
        display: flex;
        flex-direction: column;
    }

    .file {
        grid-column: 4 / -1;
        display: flex;
        flex-direction: column;
        gap: calc(var(--baseline) * 2);
        position: sticky;
        top: calc(var(--baseline) * 4);
        align-self: start;

        img {
            width: 100%;
            height: auto;
        }

        a {
            padding: calc(var(--baseline) * 2);
            display: flex;
            justify-content: center;
        }
    }
}

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

@media (max-width: 1080px) {

    section {
        h1 {
            order: 2;
        }
    }

    .document {
        display: contents;

        .edito {
            order: 3;
        }

        .file {
            display: contents;

            img {
                order: 1;
                max-height: 50vh;
                width: auto;
                max-width: 100%;
                justify-self: center;
            }

            a {
                order: 4;
                position: sticky;
                bottom: calc(var(--baseline) * 2);
                z-index: 10;
            }
        }
    }
}

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

@media (max-width: 768px) {

}