main .gallery {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center;
    max-width: 100%;
}

main .gallery.linear {
    flex-flow: column;
    align-items: center;
}

main .gallery article {
    --gallery-article-padding-lr: 1em;
    flex: 0 1 auto;
    padding: 1em var(--gallery-article-padding-lr) 0.5em;
    display: flex;
    flex-flow: column;
    align-items: center;
    width: min-content;
    max-width: 100%;
    overflow: hidden;
}

main .gallery article:target {
    background-color: beige;
    outline: thin dashed gray;
}

main .gallery article > * {
    flex: none;
}

main .gallery article > h1 {
    margin: 0.1em 0 0;
    white-space: nowrap;
    text-align: center;
    font-size: larger;
    font-weight: normal;
}

@media (max-width: 30em) {
    main .gallery article {
        flex: 1 1 auto;
    }

    main .gallery article > h1 {
        white-space: initial;
    }
}

main .gallery article > h1 > a:first-child {
    color: black;
}

main .gallery article > h1 > a:first-child:hover {
    text-decoration: revert;
}

main .gallery article > h1 .animation {
    color: orange;
}

main .gallery article > :is(a, label) {
    max-width: 100%;
    order: -1;
}

main .gallery article > :is(a, label) > img {
    display: block;
    border: 1px solid gray;
    max-width: calc(100vw - var(--gallery-article-padding-lr) * 2 - var(--main_padding-left) - var(--main_padding-right) - 2px);
    height: revert;
}

@media (max-width: 30em) {
    main .gallery {
        justify-content: space-around;
    }

    main .gallery article {
        --gallery-article-padding-lr: 0.2em;
    }
}


main .gallery article > :is(a, label) > img.noborder {
    border-color: transparent;
}


main tr.alternate, main .gallery article.alternate {
    display: none;
}

main tr.alternate:target {
    display: table-row;
}

main .gallery article.alternate:target {
    display: flex;
}