/* The photographed moment follows the scroll and holds its last frame. */
.order-family{position:relative;width:100%;align-self:stretch;isolation:isolate}
.family-sticky{position:sticky;top:140px;width:100%;max-width:min(430px,calc((100svh - 180px)*.8));margin-inline:auto}
.family-scene{position:relative;width:100%;aspect-ratio:4/5}
.family-poster,.family-canvas{display:block;width:100%;height:100%;object-fit:contain}
.family-canvas{position:absolute;inset:0;opacity:0}
.family-video-source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;inset:0}
.family-rendered .family-canvas{opacity:1}
.family-rendered .family-poster{opacity:0}
@media(min-width:801px) and (prefers-reduced-motion:no-preference){
  .family-scroll-enabled .order-body{min-height:1120px}
  .family-scroll-enabled .order-list{display:flex;flex-direction:column;justify-content:space-between}
}
@media(max-width:800px){
  .order-family{max-width:350px;margin:0 auto 42px}
  .family-sticky{top:136px;max-width:min(100%,calc((100svh - 160px)*.8))}
  .family-scroll-enabled .order-family{height:calc(440px + 65svh)}
}
@media(max-width:540px){.order-family{max-width:310px}.family-scroll-enabled .order-family{height:calc(390px + 65svh)}}
@media(max-height:620px) and (min-width:801px){.family-sticky{max-width:min(310px,calc((100svh - 150px)*.8));top:115px}}
@media(prefers-reduced-motion:reduce){
  .order-family{height:auto!important}
  .family-sticky{position:static}
  .family-canvas{display:none}
  .family-poster{opacity:1}
}