figure.film{inline-size:min(100%, calc((100svh - var(--nav-height) - 2 * var(--section-y-hero)) * 9 / 16));margin-block:0;margin-inline:auto;position:relative}@media (width>=64rem){section.hero>.frame[data-aside]>.aside:has(>figure.film){contain:size;align-self:stretch}figure.film{block-size:100%;inline-size:auto;max-inline-size:calc((200% + var(--space-8) - 2 * var(--space-5)) / 3);aspect-ratio:9/16}}figure.film>.frame{aspect-ratio:9/16;border-radius:var(--radius-lg);background-color:var(--color-ink);position:relative;overflow:hidden}figure.film>.frame>:is(img,video){object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}figure.film>.frame>video[hidden]{display:none}figure.film>.frame>video.preview{opacity:0}figure.film[data-playing][data-state=preview]>.frame>video.preview{opacity:1}figure.film>.frame>button.watch{inset-block-end:var(--space-5);inset-inline:var(--space-4);gap:var(--space-3);inline-size:fit-content;padding:var(--space-3) var(--space-4);border:var(--line-width) solid var(--color-border-primary-action);border-radius:var(--radius-pill);background-color:var(--color-surface-primary-action);color:var(--color-text-primary-on-action);font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-chrome);line-height:var(--text-action-leading);text-align:center;cursor:pointer;transition:background-color var(--dur-150) var(--ease), translate var(--dur-150) var(--ease);justify-content:center;align-items:center;margin-inline:auto;display:flex;position:absolute}figure.film>.frame>button.watch[hidden],figure.film[data-state=feature]>.frame>button.watch{display:none}figure.film>.frame>button.watch>svg{width:calc(var(--space-4) + var(--space-1));height:calc(var(--space-4) + var(--space-1));flex-shrink:0}figure.film>:is(figcaption,.control){position:absolute}figure.film>figcaption,figure.film>.control>.chip{--focus:var(--color-lime);padding-inline:var(--space-3);border-radius:var(--radius-sm);background-color:var(--color-ink)}figure.film>figcaption{gap:var(--space-2);padding-block:var(--space-2);color:var(--color-on-dark);font-family:var(--font-body);font-size:var(--text-small);font-weight:var(--weight-chrome);line-height:var(--text-small-leading);align-items:center;display:flex;inset-block-start:var(--space-4);inset-inline-start:var(--space-4)}figure.film>figcaption:before{content:"";inline-size:var(--space-2);block-size:var(--space-2);border-radius:var(--radius-pill);background-color:var(--color-lime);flex-shrink:0}figure.film[data-state=feature]>figcaption{visibility:hidden}figure.film>.control:not([hidden]){inset-block-start:var(--space-2);inset-inline-end:var(--space-4)}figure.film>.frame>button.watch:hover{background-color:var(--color-surface-primary-action-hover)}figure.film>.frame>button.watch:focus-visible{outline-color:var(--color-border-primary-focus);outline-offset:var(--focus-offset-action)}@media (prefers-reduced-motion:no-preference){figure.film>.frame>button.watch:hover{translate:0 calc(var(--space-1) / -2)}figure.film>.frame>button.watch:active{translate:none}}