@layer components {
  /* A film, the first thing on the page after its title: wide, rounded, lifted off the ground. */
  .site-film {
    inline-size: var(--size-fill);
    max-inline-size: var(--site-film-inline-size);
    margin-inline: auto;
  }

  .site-film__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    background-color: var(--color-stage);
    box-shadow: var(--elev-4);
    overflow: hidden;
  }

  .site-film__player {
    position: absolute;
    inset: var(--space-0);
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    border: none;
  }
}