/* Actual interface previews shared by the homepage and relevant guides. */
body.site-page .guide-image { margin: 20px 0 16px; min-width: 0; }
body.site-page .guide-image > a {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 5;
  border: 1px solid var(--site-line, #dce6f0);
  border-radius: 0;
  background: #f5f8fc;
  overflow: hidden;
  line-height: 0;
}
body.site-page .guide-image img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
body.site-page .guide-image figcaption {
  margin-top: 9px;
  color: #61758b;
  font-size: 12px;
  line-height: 1.65;
}
body.site-page .guide-image figcaption span { white-space: nowrap; }
body.site-home .home-answer .guide-image { margin-top: 18px; margin-bottom: 8px; }
body.site-blog .article-card .guide-image { margin: 24px 0; }
@media (max-width: 600px) {
  body.site-page .guide-image > a { border-radius: 0; }
  body.site-page .guide-image figcaption { font-size: 11px; }
}

/* The full phone screen fits inside the same frame as landscape previews. */
body.site-page .guide-image--phone img {
  padding: 12px;
  box-sizing: border-box;
}