.npc-art {
  display: none;
  width: min(390px, 44vw);
  height: 290px;
  object-fit: contain;
  object-position: center 18%;
  pointer-events: none;
  filter: contrast(1.03) saturate(.9) drop-shadow(0 18px 34px rgba(0,0,0,.52));
}

.npc-mode.has-npc-video #npcVideo:not([hidden]) {
  display: block;
}

.npc-mode.has-npc-art:not(.has-npc-video) #npcArt:not([hidden]) {
  display: block;
}

#npcVideo[hidden],
#npcArt[hidden] {
  display: none !important;
}

.npc-mode.has-npc-art .npc-glyph,
.npc-mode.has-npc-video .npc-glyph {
  display: none;
}

@media (max-width: 760px) {
  .npc-art {
    width: min(76vw, 300px);
    height: min(29dvh, 238px);
    object-position: center 16%;
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .npc-art {
    width: min(70vw, 270px);
    height: min(25dvh, 205px);
  }
}
@media (min-width: 761px) and (max-height: 900px) {
  .npc-art {
    width: clamp(180px, 38dvh, 300px);
    height: clamp(160px, 36dvh, 286px);
  }
}

@media (min-width: 761px) and (max-height: 760px) {
  .npc-art {
    width: clamp(160px, 34dvh, 240px);
    height: clamp(140px, 32dvh, 230px);
  }
}