.roundel-loop {
  display: block;
  aspect-ratio: 1;
  pointer-events: none;
}

.roundel-loop__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.roundel-loop__canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: none;
  left: 0;
  top: 0;
}

.roundel-loop.is-sequence-ready .roundel-loop__fallback {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .roundel-loop__canvas {
    display: none;
  }

  .roundel-loop.is-sequence-ready .roundel-loop__fallback {
    visibility: visible;
  }
}