.scene-panel.project .project-media,
.scene-panel.project.project-like-fog .project-media {
  width: min(100%, 780px);
  height: auto;
  aspect-ratio: 897 / 700;
  margin-inline: auto;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(12px 11px 16px rgba(0, 0, 0, .27));
}

.scene-panel.project .project-media::after {
  z-index: 4;
  inset: 0;
  background: url("assets/film-strip-overlay.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.scene-panel.project .project-media::before {
  position: absolute;
  z-index: 0;
  top: 17.5%;
  right: 4.3%;
  bottom: 16.5%;
  left: 4.3%;
  background: #0b0b0a;
  content: "";
}

.scene-panel.project .project-media img,
.scene-panel.project .project-media video {
  position: absolute;
  top: 17.5%;
  right: 4.3%;
  bottom: 16.5%;
  left: 4.3%;
  width: 91.4%;
  height: 66%;
  object-fit: cover;
  clip-path: inset(1.5% 0);
  transform: scaleY(.985);
}

.scene-panel.project .project-media video {
  z-index: 1;
  opacity: 0;
  filter: saturate(.9);
  clip-path: inset(5.2%);
  transform: scale(1.08);
  transition: opacity .36s ease, filter .5s ease;
}

.scene-panel.project .project-media:hover video.project-media-rollover,
.scene-panel.project .project-media:focus-visible video.project-media-rollover {
  opacity: 0;
  transform: scale(1.08);
}

.scene-panel.project .project-media.is-loop-playing video.project-media-rollover,
.scene-panel.project .project-media.is-loop-playing:hover video.project-media-rollover,
.scene-panel.project .project-media.is-loop-playing:focus-visible video.project-media-rollover {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1.08);
}

/* Keep the still visible while Chromium starts the decoder. The video replaces
   it only after the first composited frame is ready, avoiding a blank hover. */
.scene-panel.project .project-media:hover .project-media-normal,
.scene-panel.project .project-media:focus-visible .project-media-normal {
  opacity: 1;
}

.scene-panel.project .project-media.is-loop-playing .project-media-normal,
.scene-panel.project .project-media.is-loop-playing:hover .project-media-normal,
.scene-panel.project .project-media.is-loop-playing:focus-visible .project-media-normal {
  opacity: 0;
}

.scene-panel.project .project-number {
  z-index: 5;
  top: 20%;
  left: 7%;
}

.scene-panel.project .view-project {
  z-index: 5;
  right: 7%;
  bottom: 19%;
}

@media (max-width: 700px) {
  body.simple-mobile .scene-panel.project .project-media,
  body.simple-mobile .scene-panel.project.project-like-fog .project-media {
    width: 100%;
    height: auto;
    aspect-ratio: 897 / 700;
    box-shadow: none;
    filter: drop-shadow(7px 8px 11px rgba(0, 0, 0, .25));
  }

  body.simple-mobile .scene-panel.project .project-media img,
  body.simple-mobile .scene-panel.project .project-media video {
    top: 17.5%;
    right: 4.3%;
    bottom: 16.5%;
    left: 4.3%;
    width: 91.4%;
    height: 66%;
    transform: scaleY(.985);
  }

  body.simple-mobile .scene-panel.project .project-media video.project-media-rollover {
    display: none !important;
  }

  body.simple-mobile .scene-panel.project .project-media .project-media-normal,
  body.simple-mobile .scene-panel.project .project-media:hover .project-media-normal,
  body.simple-mobile .scene-panel.project .project-media:focus-visible .project-media-normal,
  body.simple-mobile .scene-panel.project .project-media.is-tap-active .project-media-normal {
    display: block;
    opacity: 1 !important;
    filter: saturate(.9);
    transform: scaleY(.985);
  }

  body.simple-mobile .scene-panel.project .project-number {
    top: 20%;
    left: 7%;
  }

  body.simple-mobile .scene-panel.project .view-project {
    right: 7%;
    bottom: 19%;
  }
}