.ds-media-frame-state {
  position: relative;
  isolation: isolate;
}

.ds-media-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    linear-gradient(110deg, transparent 22%, rgba(255, 255, 255, .07) 42%, transparent 62%) 100% 0 / 220% 100%,
    linear-gradient(135deg, rgba(43, 231, 214, .055), rgba(240, 20, 33, .045)),
    #090b0d;
  animation: ds-media-skeleton 1.35s linear infinite;
  transition: opacity var(--ds-motion-fast, 160ms) ease;
}

.ds-media-skeleton.is-hidden {
  opacity: 0;
  animation: none;
}

.ds-media-frame-state picture,
.ds-media-frame-state > img,
.ds-media-frame-state > video {
  position: relative;
  z-index: 1;
}

img[data-ds-media-state="loading"] {
  opacity: 0 !important;
}

img[data-ds-media-state="ready"] {
  animation: ds-media-ready var(--ds-motion-medium, 220ms) var(--ds-motion-ease, ease) both;
}

img[data-ds-media-state="error"] {
  opacity: 0 !important;
}

.ds-media-frame-state.is-media-error .ds-media-skeleton {
  opacity: .38;
  animation: none;
}

@keyframes ds-media-ready {
  from {
    opacity: 0;
    filter: saturate(.86);
  }
  to {
    opacity: var(--ds-media-opacity, 1);
    filter: saturate(1);
  }
}

@keyframes ds-media-skeleton {
  from { background-position: 110% 0, 0 0, 0 0; }
  to { background-position: -110% 0, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-media-skeleton,
  img[data-ds-media-state] {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  img[data-ds-media-state="ready"] {
    opacity: var(--ds-media-opacity, 1);
  }
}