[data-infinity] {
  --u-infinity-max-h: min(34vh, 17.5rem);
  position: relative;
  width: min(86vw, 32rem, calc(var(--u-infinity-max-h) * 16 / 9));
  max-height: var(--u-infinity-max-h);
  aspect-ratio: 16 / 9;
  align-self: center;
  transform-origin: center;
  animation: u-infinity-breathe 8.5s ease-in-out infinite;
}

@media (max-height: 50rem) {
  [data-infinity] {
    --u-infinity-max-h: min(28vh, 13.5rem);
    width: min(82vw, 28rem, calc(var(--u-infinity-max-h) * 16 / 9));
  }
}

@media (max-width: 24.375rem) {
  [data-infinity] {
    --u-infinity-max-h: min(26vh, 11.5rem);
    width: min(84vw, 22rem, calc(var(--u-infinity-max-h) * 16 / 9));
  }
}

[data-mark] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

[data-mark="dark"] {
  display: none;
}

html[data-theme="dark"] [data-mark="light"] {
  display: none;
}

html[data-theme="dark"] [data-mark="dark"] {
  display: block;
}

@keyframes u-infinity-breathe {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  50% {
    transform: scale(1.03) translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-infinity] {
    animation: none;
  }
}