j-wrap.index {

    display: grid;
    grid-template-rows: 1fr auto auto;
    grid-template-columns: 1fr;
    grid-template-areas: "centerpiece" "title" "navigation";

    max-height: 100cqh;
    overflow: auto;

    figure.centerpiece {
        grid-area: centerpiece;
    }

    img.centerpiece {
        height: 100%;
        padding: 2em 0 4em 0;
    }

    h1 {
        grid-area: title;
        text-align: center;
        font-size: calc(1em + 2vw);
        margin-bottom: 0.125em;
        margin-top: 0;
    }

    nav {
        grid-area: navigation;
        padding-bottom: 2em;
    }

    nav a {
        text-decoration-style: dotted;
    }

    nav ul {
        text-align: center;
        padding: 0;
    }

    nav ul li {
        display: inline;
        margin: 0 0.25em;
        font-size: calc(0.65em + 1vw);
    }

    * { transition: 5s; }
}

img.centerpiece {
    animation-name: multi;
    animation-timing-function: linear;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    mask-image: repeating-radial-gradient(
        circle at farthest-corner in hsl longer hue,
        light-dark(#222, #000) 0%,
        light-dark(#888, #444) 50%,
        #fff 100%
    );
    mask-mode: luminance;
}

img.two { animation-delay: -6s; }
img.three { animation-delay: -12s; }
img.four { animation-delay: -18s; }
img.four { animation-delay: -24s; }
img.five { animation-delay: -30s; }

@keyframes multi {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }

    10% {
        filter:
        hue-rotate(0deg)
        drop-shadow(0 0 26vw #3B050580)
        brightness(3)
        blur(0.2px)
        saturate(1)
        contrast(3)
        ;
    }

    40% {
        filter:
        hue-rotate(0deg)
        drop-shadow(0 0 0 #00000000)
        brightness(1)
        blur(0.2px)
        saturate(2)
        contrast(1)
        ;
    }

    60% {
        filter:
        hue-rotate(0deg)
        drop-shadow(0 0 26vw #66000080)
        brightness(1)
        blur(0.2px)
        saturate(1)
        contrast(1)
        ;
    }

    90% {
        filter:
        hue-rotate(50deg)
        drop-shadow(0 0 0 #00000000)
        brightness(3)
        blur(0)
        saturate(1.2)
        contrast(2)
        ;
    }

    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

@media (max-width: 600px) {
    body {
        grid-template-columns: 1fr;
    }
}