/* Use slightly different style on the splash page than on every other page. */
#header-footer-main-container.splash-page {
    align-items: end;
    grid-template-rows: 25% 1fr 25%;
}

main {
    --image-height: 40dvh;
    grid-row: 2 / 3;
    height: var(--image-height);
}

.marquee-container {
    width: 100dvw;
    height: var(--image-height);
    position: absolute;
    left: calc(50% - 50dvw);
    overflow: hidden;
}

.marquee {
    will-change: transform;
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    animation: move-right-to-left 80s linear infinite alternate;
    transform-box: content-box;
    display: flex;
    flex-direction: row;
}

.marquee>img {
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    height: var(--image-height);
    width: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;

    /* Small box-shadow applied to avoid stuttering subpixel animation in Firefox. */
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
}

/* Small rotation used to avoid stuttering subpixel animation in Firefox. */
@keyframes move-right-to-left {
    0% {
        transform: translateX(0%) rotate(0.1deg);

    }

    100% {
        transform: translateX(calc(100dvw - 100%)) rotate(0.1deg)
    }
}