.wdm-device {
  position: relative;
  width: 100%;
  aspect-ratio: 2200 / 1430;
  overflow: clip;
  isolation: isolate;
}

.wdm-device > .dvf-mac,
.wdm-device > .wdm-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wdm-device > .dvf-mac {
  opacity: 1;
}

.wk-index .wk-card .wdm-device > .dvf-mac {
  transform: none;
  transition: opacity 280ms ease;
}

.wdm-film {
  display: none;
  opacity: 0;
  pointer-events: none;
}

.wdm-armed > .dvf-mac { opacity: 0; }
.wdm-armed > .wdm-film { display: block; opacity: 1; }
.wdm-handoff > .dvf-mac { opacity: 1; }
.wdm-handoff > .wdm-film { opacity: 0; transition: opacity 280ms ease; }
.wk-index .wk-card .wdm-device.wdm-done > .dvf-mac { opacity: 1; transition: none; }

.wdm-credit {
  display: block;
  width: fit-content;
  margin: -2rem auto 2rem;
  color: var(--muted);
  font: 400 0.75rem/1.5 var(--body);
  text-underline-offset: 0.2em;
}

@media (prefers-reduced-motion: reduce) {
  .wdm-device { transform: none !important; }
  .wdm-device > .dvf-mac { opacity: 1 !important; transition: none !important; }
  .wdm-device > .wdm-film { display: none !important; }
}