/* The app pictures in the App Center dialogs (decision S43). tools/app-media.py writes the block into each dialog
   from hosting/app-media/apps.json; the pictures live on pub.qnaputilities.com/app-media/<app>/. A row of 16:9
   pictures that scrolls sideways with snap points: two on a wide screen (with the edge of a third when there are
   more), one and a bit on a phone. Each opens the full 1280x720 picture. No script: a swipe, the wheel and the
   scroll bar move it. */
.am-shots{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 5px);gap:10px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  margin:4px 0 16px;padding-bottom:6px;
  scrollbar-width:thin;scrollbar-color:var(--rule-hi,#33424B) transparent;
}
.am-shots[data-n="1"]{grid-auto-columns:100%}
/* three or four: the next picture shows at the edge, so the row reads as one that scrolls */
.am-shots[data-n="3"],.am-shots[data-n="4"]{grid-auto-columns:44%}
.am-shot{
  display:block;scroll-snap-align:start;line-height:0;overflow:hidden;
  background:#0B1014;border:1px solid var(--rule,#222D34);border-radius:4px;
  transition:border-color .2s ease;
}
.am-shot:hover,.am-shot:focus-visible{border-color:var(--led,#FFB020)}
.am-shot:focus-visible{outline:2px solid var(--led,#FFB020);outline-offset:2px}
.am-shot picture,.am-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.am-shots+.am-credit{margin:-10px 0 16px;color:var(--dim,#7C8B93);font-size:12px}
@media (max-width:560px){.am-shots,.am-shots[data-n]{grid-auto-columns:86%}.am-shots[data-n="1"]{grid-auto-columns:100%}}
@media (prefers-reduced-motion:reduce){.am-shot{transition:none}}