.navigation-hover-preview {
  position: fixed;
  z-index: 100;
  width: 9vw;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}

.navigation-hover-preview[data-state="placeholder"] {
  border: 1px solid #000;
  background: #fff;
}

.navigation-hover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .74;
}

.navigation-hover-preview[data-state="image"] img {
  animation: navigation-hover-fade-in .47s ease-out both;
}

body.index-page.menu-tree-active .navigation-hover-preview[data-state="image"] img {
  animation: none;
}

@keyframes navigation-hover-fade-in {
  from { opacity: 0; }
  to { opacity: .74; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation-hover-preview[data-state="image"] img {
    animation: none;
  }
}

.navigation-hover-preview[hidden],
.navigation-hover-preview img[hidden] {
  display: none;
}