/* Native scroll animation: no JavaScript classes, handlers, or RAF loops. */
.pin {
    position: relative;
    isolation: isolate;
    height: auto;
}

.pin__inner {
    position: static;
    display: flex;
    align-items: center;
    height: auto;
}

.pin__inner > * {
    width: 100%;
}

@supports (animation-timeline: --all-inclusive) and (view-timeline-inset: 1px) and (animation-range: contain) {
    @media (min-width: 1201px) and (prefers-reduced-motion: no-preference) {
        .pin {
            height: calc(100vh + var(--pin-scroll-distance, 100vh));
            view-timeline-name: --all-inclusive;
            view-timeline-axis: block;
            view-timeline-inset: 0;
        }

        .pin__inner {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
        }
    }
}