@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

.film-section {
    padding: 5rem 2rem;
    scroll-margin-top: 2rem;
}

.film-player {
    background: #151515;
    border: 1px solid #454545;
}

.film-placeholder {
    min-height: 32rem;
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 5vw, 4rem);
    background: #151515 center / cover;
}

.film-consent { max-width: 40rem; }
.film-consent p { margin-bottom: 1.25rem; font-size: 1.125rem; }
.film-consent .film-kicker { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: bold; }
.film-consent a, .film-actions a, .film-actions button { text-decoration: underline; text-underline-offset: 4px; }
.film-button { border: 2px solid white; padding: 1rem 1.5rem; font: inherit; cursor: pointer; }
.film-button:hover { background: white; color: black; }
.film-section :focus-visible { outline: 3px solid white; outline-offset: 5px; }
.film-player iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.film-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.film-actions button { cursor: pointer; text-align: left; }
.film-section [hidden] { display: none; }

@media (min-width: 64rem) {
    .film-section { padding-top: 7rem; padding-bottom: 10rem; }
}

.film-section > div {
    position: relative;
}
.film-section > div::before,
.film-section > div::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgb(255 255 255 / 25%);
}
.film-section > div::before { top: calc(-1 * var(--section-space, 5rem)); }
.film-section > div::after { bottom: calc(-1 * var(--section-space, 5rem)); }