.hero-with-video::before{z-index:0}
.hero-with-video::after{z-index:2;pointer-events:none}
.hero-with-video .hero-inner{z-index:3}
.hero-motion{position:absolute;inset:0 0 0 28%;z-index:1;opacity:0;transition:opacity .5s ease;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 29%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 29%,#000 100%)}
.hero-motion-video{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-with-video.is-video-ready .hero-motion{opacity:1}
@media(min-width:1600px){.hero-motion{left:34%}}
@media(max-width:1050px) and (min-width:821px){.hero-motion{left:22%}.hero-motion-video{object-position:20% center}}
@media(max-width:820px){.hero-motion{inset:0;-webkit-mask-image:none;mask-image:none}.hero-motion-video{object-position:43% center}}
@media(prefers-reduced-motion:reduce){.hero-motion{transition:none}}