.publication--gallery {
    display: none;
}

.publication--picture {
    grid-column: 1/-1;
    margin: -1rem;
    margin-bottom: 0;
    height: 100vw;
    border-bottom: 3px solid black;
}

.publication--header {
    grid-column: 1/-1;
}

.publication--header > h2 {
    grid-column: 1/-1;
    margin: 1.25rem 0 2.5rem;
}

.publication--header > p {
    grid-column: 1/-1;
}

.publication--header > a {
    grid-column: 1/-1;
    margin: 3rem auto 4rem;
}

.publication--article {
    grid-column: 1/-1;
    border-top: 3px solid black;
    padding-top: .5em;
}

.publication--article > * {
    margin-bottom: 4rem;
}

.publication--article-description,
.publication--article-gallery,
.publication--article-biographies,
.publication--article-details {
    grid-column: 1/-1;
}

.publication--article-description {
    margin-bottom: 2rem;
}

.publication--article-gallery figure {
    grid-column: 1/-1;
    height: 100vw;
}

.publication--article-gallery figure:not(:last-of-type) {
    margin-bottom: 1rem;
}

.publication--article-biographies {
    border-top: 3px solid black;
    padding-top: .5em;
}

.publication--article-details {
    margin: 2rem 0 0;
    border-top: 3px solid black;
    padding: 1em 15vw 0 0;
}

.publication--article-details > li:not(:last-of-type) {
    margin-bottom: 1em;
}


/* TABLET */
@media only screen and (min-width: 768px) {
    .publication--picture,
    .publication--article-gallery {
        display: none;
    }

    /* gallery */
    .publication--gallery {
        display: block;
        grid-column: 1/5;
        grid-row: 1/4;
        align-self: flex-start;
        position: sticky;
        top: calc(6rem - 3px);
    }

    .p-gallery_container {
        width: 100%;
        height: 50vw;
        overflow: hidden;
        display: flex;
        flex-wrap: nowrap;
    }

    .p-gallery_figure {
        min-width: 100%;
        max-width: 100%;
        height: 100%;
    }

    .p-gallery_controls {
        margin-top: 1rem;
        display: flex;
        flex-wrap: wrap;
    }

    .p-gallery_button {
        min-width: calc(calc(var(--column-widthT) - 1rem) / 2);
        max-width: calc(calc(var(--column-widthT) - 1rem) / 2);
        height: calc(calc(var(--column-widthT) - 1rem) / 2);
        margin-bottom: 1rem;
        filter: grayscale();
    }

    .p-gallery_button:not(:nth-of-type(8n)) {
        margin-right: 1rem;
    }

    .p-gallery_button.active {
        filter: none;
    }

    /* page */
    .publication--header {
        grid-column: 5/-1;
        padding: 0;
        margin-left: .5rem;
    }

    .publication--header > h2 {
        margin: 0;
        text-align: left;
    }
    
    .publication--header > p {
        text-align: left;
        margin-top: 1em;
    }
    
    .publication--header > a {
        margin: 6rem auto;
    }

    .publication--article {
        grid-column: 5/-1;
        margin-left: .5rem;
    }

    .publication--article-description {
        margin-bottom: 4rem;
    }

    .publication--article-details {
        margin: 0;
    }
}


/* DESKTOP */
@media only screen and (min-width: 1024px) {
    .publication--gallery {
        grid-column: 1/9;
    }

    .p-gallery_container {
        height: 50vw;
        max-height: 80vh;
    }

    .p-gallery_button {
        min-width: calc(calc(var(--column-widthD) - 1rem) / 2);
        max-width: calc(calc(var(--column-widthD) - 1rem) / 2);
        height: calc(calc(var(--column-widthD) - 1rem) / 2);
    }

    .publication--header,
    .publication--article {
        grid-column: 9/-1;
    }

    .publication--header > p,
    .publication--header > a {
        grid-column: span 4;
    }

    .publication--header > a {
        margin: 4rem 0 8rem;
        width: fit-content;
    }

    .publication--article-description {
        margin-bottom: 8rem;
    }

    .publication--article-biographies,
    .publication--article-details {
        grid-column: span 4;
    }
}


/* HOVER */
@media (hover: hover) {
    .p-gallery_button:hover {
        filter: none;
    }
}