/* The film leads the hero: straight, full-width stamp with responsive framing. */
.hero.hero-deck.hero-media-first {
 display:block;width:calc(100% - 32px);max-width:1920px;
 min-height:0;height:auto;max-height:none;margin:16px auto 0;overflow:hidden;
}
.hero-accessible-title {
 position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;
 padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
 clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;
}
.hero-media-first .hero-visual {
 display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
 width:100%;min-height:0;padding:32px 32px 72px;overflow:hidden;
}
.hero-media-first .hero-film {
 grid-area:1 / 1;justify-self:center;width:100%;max-width:none;margin:0;transform:none;
}
.hero-media-first .hero-film-window {aspect-ratio:16 / 9;overflow:hidden}
.hero-media-first .hero-film-window .hero-poster,
.hero-media-first .hero-film-window .hero-poster img,
.hero-media-first .hero-film-window video {
 position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 object-position:center;mask-image:none;-webkit-mask-image:none;
}
.hero-media-first .hero-film-window .hero-poster {display:block}
.hero-media-first .hero-film-window video {display:block;opacity:0}
.hero-media-first .hero-film-window.has-video video {opacity:1}
.hero-media-first .hero-film-window.has-video .hero-poster {visibility:hidden}
.hero-media-first .hero-caption {margin-top:12px;font-size:8px;letter-spacing:.1em}
.hero-media-first .hero-postmark {
 grid-area:1 / 1;position:relative;top:auto;right:auto;align-self:start;justify-self:end;
 width:74px;height:74px;font-size:7px;transform:translate(6px,-20px) rotate(12deg);
}
.hero-media-first .hero-mini-stamp {
 grid-area:1 / 1;position:relative;left:auto;bottom:auto;align-self:end;justify-self:start;
 width:80px;height:100px;border-width:7px;border-image-width:7px;padding:3px;
 transform:translate(-12px,58px) rotate(-9deg);
}
.hero-media-first .hero-mini-stamp img {height:50px;max-width:64px}
.hero-media-first .hero-mini-stamp span {font-size:8px}
@media(min-width:601px) and (max-width:1023px) {
 .hero-media-first .hero-visual {padding:28px 24px 64px}
 .hero-media-first .hero-film {border-width:11px;border-image-width:11px;padding:5px}
 .hero-media-first .hero-film-window {aspect-ratio:4 / 3}
 .hero-media-first .hero-caption {font-size:7px;margin-top:10px}
 .hero-media-first .hero-postmark {width:66px;height:66px;font-size:6px;transform:translate(0,-18px) rotate(12deg)}
 .hero-media-first .hero-mini-stamp {width:70px;height:90px;transform:translate(-4px,52px) rotate(-9deg)}
 .hero-media-first .hero-mini-stamp img {height:45px;max-width:57px}
}
@media(max-width:600px) {
 .hero.hero-deck.hero-media-first {width:calc(100% - 16px);margin:10px auto 0}
 .hero-media-first .hero-visual {padding:36px 14px 66px}
 .hero-media-first .hero-film {border-width:10px;border-image-width:10px;padding:4px}
 .hero-media-first .hero-film-window {aspect-ratio:1 / 1}
 .hero-media-first .hero-caption {font-size:7px;line-height:1.4;letter-spacing:.08em;margin-top:10px}
 .hero-media-first .hero-postmark {width:52px;height:52px;font-size:5px;transform:translate(0,-27px) rotate(12deg)}
 .hero-media-first .hero-mini-stamp {width:65px;height:84px;transform:translate(0,54px) rotate(-9deg)}
 .hero-media-first .hero-mini-stamp img {height:40px;max-width:51px}
 .hero-media-first .hero-mini-stamp span {font-size:7px}
}
