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;
        padding: 2em 1em;
    }

    img.centerpiece {
        height: 100%;
    }

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

    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:hover {
    cursor: crosshair;
    border-radius: 180px;
    backdrop-filter:
    blur(2px)
    drop-shadow(4px 4px 10px red)
    grayscale(70%)
    ;
}

img.centerpiece {
    animation-name: multi;
    animation-timing-function: linear;
    animation-duration: 30s;
    animation-iteration-count: infinite;
}

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 8vw #3B050560)
        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 8vw #66000060)
        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);
    }
}