.hero-motion-wrap { width: min(100%, 424px); margin-left: auto; }
.hero-motion-wrap .hero-art { width: 100%; margin: 0; }
.hero-motion-wrap video { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; background: #e9e6df; }
.hero-motion-wrap [hidden] { display: none !important; }
.hero-motion-controls { display: flex; align-items: center; min-height: 48px; margin-top: 4px; }
.hero-motion-controls button { min-height: 44px; padding: 8px 0; color: var(--teal); background: transparent; border: 0; cursor: pointer; font-family: var(--sans); font-size: 12px; text-decoration: underline; text-underline-offset: 5px; }
.hero-motion-controls button:hover { color: var(--copper); }
.hero-motion-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 720px) {
  .hero-motion-wrap { align-self: flex-end; width: min(62%, 245px); margin-right: 8px; }
}
@media (max-width: 420px) {
  .hero-motion-wrap { width: min(63%, 220px); }
}