#transition-provider {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

#transition-provider[data-state="loading"],
#transition-provider[data-state="loaded"] {
  z-index: 100;
}

.transition-provider-layout {
  display: grid;
  height: 100%;
  grid-template-columns: 32rem minmax(0, 1fr);
  gap: 1.6rem;
  padding: 1.6rem;
}

.transition-provider-content {
  position: relative;
  min-width: 0;
  height: 100%;
}

.transition-media-layer {
  position: absolute;
  inset: 0;
}

.transition-media-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f7f7;
  opacity: 0;
  transform-origin: top left;
}

.transition-media-frame video,
.transition-media-frame img,
[data-media-mirror-id],
[data-media-mirror-id] video {
  display: block;
  width: 100%;
  height: 100%;
}

.transition-media-frame video,
.transition-media-frame img,
[data-media-mirror-id] video {
  object-fit: cover;
}

body.is-case-transitioning {
  overflow: hidden;
}

.case-hero-mirror {
  display: none;
}

@media (max-width: 800px) {
  .transition-provider-layout {
    display: block;
    padding: 0;
  }

  .transition-provider-sidebar {
    display: none;
  }

  .transition-media-frame {
    aspect-ratio: 4 / 5;
    border-radius: 0;
  }

  .case-mobile-hero {
    height: auto;
    aspect-ratio: 4 / 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #transition-provider {
    display: none;
  }
}