.filmstrip {
    --kolommen: 3;
    --gap: 12px;
    --kolbreedte: calc((100cqw - (var(--kolommen) - 1) * var(--gap)) / var(--kolommen));
    container-type: inline-size;
    overflow: hidden;
    border-radius: 16px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.filmstrip.sleept { cursor: grabbing; }

.film-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: var(--kolbreedte);
    gap: var(--gap);
    will-change: transform;
}

.film-item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.06);
}
.film-item-hoog { grid-row: span 2; aspect-ratio: auto; }

.film-item img,
.film-item video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}

.film-statisch .film-kloon { display: none; }
.film-statisch { cursor: default; }

@media (max-width: 900px) {
    .filmstrip { --kolommen: 2; --gap: 10px; }
}
@media (max-width: 520px) {
    .filmstrip { --kolommen: 1.15; --gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .filmstrip { overflow-x: auto; cursor: auto; touch-action: auto; scroll-snap-type: x proximity; }
    .film-kloon { display: none; }
    .film-item { scroll-snap-align: start; }
}