/* Full-width browser previews for the website archive. */
.archive-grid .archive-image,
.archive-grid .archive-card:nth-child(3n) .archive-image {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    padding-top: 38px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #0c0d0b !important;
}

.archive-grid .archive-image > img {
    position: absolute !important;
    inset: 38px 0 0 !important;
    display: block !important;
    width: 100% !important;
    height: calc(100% - 38px) !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: top center !important;
    background: #0c0d0b !important;
    transform: translate3d(0, 0, 0) !important;
    will-change: auto;
}

/* Tall captures behave like a real page moving inside a browser viewport. */
.archive-grid .archive-image.is-tall-preview > img {
    right: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: calc(100% - 38px) !important;
    object-fit: initial !important;
    will-change: transform;
    animation: archive-page-preview-pan var(--preview-duration, 16s) cubic-bezier(.65, 0, .35, 1) infinite alternate;
}

.archive-grid .archive-card:hover .archive-image.is-tall-preview > img {
    animation-play-state: paused;
}

@keyframes archive-page-preview-pan {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, calc(-1 * var(--preview-travel, 0px)), 0); }
}

@media (max-width: 680px) {
    .archive-grid .archive-image,
    .archive-grid .archive-card:nth-child(3n) .archive-image {
        width: 100% !important;
        margin-left: 0 !important;
        aspect-ratio: 16 / 11 !important;
        padding-top: 32px !important;
    }

    .archive-grid .archive-image > img {
        inset: 32px 0 0 !important;
        height: calc(100% - 32px) !important;
    }

    .archive-grid .archive-image.is-tall-preview > img {
        height: auto !important;
        min-height: calc(100% - 32px) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .archive-grid .archive-image.is-tall-preview > img {
        animation: none !important;
    }
}