/* Guides — annotated UI shots in premium frames */

body.guides-page .guide-shot {
  max-width: 520px;
  margin: 1.5rem auto 0;
}
body.guides-page .guide-shot .media-frame {
  margin: 0;
}
body.guides-page .guide-shot .media-crop {
  aspect-ratio: 5 / 4;
  background: #05080D;
}
body.guides-page .guide-shot .media-crop img {
  object-fit: contain;
  object-position: center;
  transform: none;
  padding: 0.35rem;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(39,135,255,0.12), transparent 60%),
    #070b12;
}
body.guides-page .guide-shot .media-frame:hover .media-crop img {
  transform: scale(1.02);
  filter: brightness(1.04);
}

body.guides-page .guide-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
body.guides-page .guide-shot-grid .guide-shot {
  max-width: none;
  margin: 0;
}
body.guides-page .guide-shot-grid .media-crop {
  aspect-ratio: 1 / 1;
}

@media (max-width: 900px) {
  body.guides-page .guide-shot-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}