/* Screenshots of the Taskriz app (renderers/web/tools/app-shots.mjs) on the /app/ page and the For People guide. */
.app-shot { margin: 0; }
.app-shot img { display: block; width: 100%; height: auto; border-radius: 22px; background: #f2f2f7;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14), 0 10px 28px rgba(0, 0, 0, .10); }
.app-shot figcaption { margin-top: 10px; font-size: 14px; line-height: 1.4; color: #6e6e73; }
.app-shot figcaption b { color: #1d1d1f; }

/* the /app/ page: a gallery of screens */
.app-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 22px; margin: 26px 0 8px; }
.app-gallery a { color: inherit; text-decoration: none; }

/* For People: each function beside its screen; stacked on phones */
.guide-fn { display: grid; grid-template-columns: minmax(0, 1fr) 220px; column-gap: 32px; align-items: start; margin: 44px 0; }
.guide-fn .app-shot { grid-column: 2; grid-row: 1 / span 6; }
.guide-fn > :not(.app-shot) { grid-column: 1; }
.guide-fn > h2 { margin-top: 0; }
@media (max-width: 700px) {
  .guide-fn { grid-template-columns: minmax(0, 1fr); }
  .guide-fn .app-shot { grid-column: 1; grid-row: auto; max-width: 260px; margin: 8px 0 4px; }
}

@media (prefers-color-scheme: dark) {
  .app-shot img { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 28px rgba(0, 0, 0, .5); }
  .app-shot figcaption { color: #a1a1a6; }
  .app-shot figcaption b { color: #f5f5f7; }
}