#article-photo-hover {
  position: fixed;
  z-index: 400;
  box-sizing: border-box;
  width: min(340px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid #ccd6df;
  border-radius: 12px;
  background: #fff;
  color: #1c2b39;
  box-shadow: 0 12px 36px #172e4a38;
}
#article-photo-hover[hidden] { display: none; }
#article-photo-hover > img {
  display: block;
  width: 100%;
  height: min(300px, max(72px, calc(100vh - 108px)));
  object-fit: contain;
  border-radius: 5px;
  background: #fff;
}
#article-photo-hover .article-photo-hover-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding-top: 8px;
  font: 500 14px/1.4 system-ui, sans-serif;
  overflow-wrap: anywhere;
}
#article-photo-hover .article-photo-hover-caption[hidden] { display: none; }
html[data-theme="dark"] #article-photo-hover { background: #1c2b39; color: #edf4fc; border-color: #557088; }