.image-preview {
  position: fixed;
  inset: auto;
  z-index: 2147483000;
  width: min(430px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100svh - 32px);
  margin: 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid #a7b794;
  border-radius: 23px;
  background: #faf4e7;
  color: #183c32;
  box-shadow: 0 18px 55px -15px #203a3666, 0 0 0 4px #fff9e799;
  pointer-events: none !important;
  opacity: 0;
  translate: 0 5px;
  transition: opacity .16s ease, translate .18s ease;
}
.image-preview[hidden] { display: none !important; }
.image-preview:not([popover]) { display: flex; flex-direction: column; }
.image-preview:popover-open { display: flex; flex-direction: column; }
.image-preview.is-visible { opacity: 1; translate: 0 0; }
.image-preview::backdrop { background: transparent; pointer-events: none; }
.image-preview-media {
  flex: 1 1 auto;
  min-height: 80px;
  height: min(420px, 52svh);
  overflow: hidden;
  border: 1px solid #c2cbb2;
  border-radius: 17px;
  background: radial-gradient(ellipse at 50% 10%, #fdf9f0, #e3e8d7);
}
.image-preview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.image-preview-copy {
  flex: 0 0 auto;
  min-width: 0;
  padding: 15px 15px 12px;
  text-align: left;
}
.image-preview-copy h3 {
  margin: 0;
  color: #183c32;
  font: 400 31px/1.07 var(--serif, Georgia, serif);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.image-preview-info,
.image-preview-caption {
  margin: 9px 0 0;
  color: #4f685c;
  font: 13px/1.65 var(--sans, "Segoe UI", sans-serif);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.image-preview-caption { color: #70816a; font-size: 11px; }
.image-preview-info[hidden],
.image-preview-caption[hidden] { display: none; }
@media (max-height: 560px) {
  .image-preview-copy { padding: 10px 12px 8px; }
  .image-preview-copy h3 { font-size: 25px; }
  .image-preview-info { font-size: 12px; line-height: 1.5; }
  .image-preview-caption { margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-preview { transition: none; translate: none; }
}