/* The app captures retain their native proportions and full contents. */
.screenshots-section{min-width:0}
.screenshots-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;min-width:0;max-width:100%}
.screenshot-card{min-width:0;margin:0;scroll-snap-align:start}
.screenshot-image{display:block;width:100%;height:auto;max-width:320px;margin-inline:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.screenshot-card figcaption{max-width:350px;margin-inline:auto;padding-top:23px}
.screenshot-card h3{font-size:1.55rem;line-height:1.3;overflow-wrap:anywhere}
.screenshot-card p{margin-top:11px;color:var(--muted);font-size:.84rem;line-height:1.8;overflow-wrap:anywhere}
@media(max-width:1100px){.screenshots-grid{gap:24px}.screenshot-card h3{font-size:1.4rem}}
@media(max-width:800px){
  .screenshots-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,320px);gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-block:2px 19px;scrollbar-width:auto;scrollbar-color:var(--muted) var(--faint)}
  .screenshots-grid::-webkit-scrollbar{display:block;height:10px}
  .screenshots-grid::-webkit-scrollbar-track{background:var(--faint);border-radius:6px}
  .screenshots-grid::-webkit-scrollbar-thumb{background:var(--muted);border-radius:6px}
  .screenshot-card figcaption{padding-top:19px}
  .screenshot-card h3{font-size:1.5rem}
  .screenshot-card p{font-size:.81rem;line-height:1.75}
}
@media(prefers-reduced-motion:reduce){.screenshots-grid{scroll-snap-type:none;scroll-behavior:auto}}
.article-screenshot{margin:34px 0}
.article-screenshot img{display:block;width:100%;height:auto;max-width:300px;margin-inline:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.article-screenshot figcaption{max-width:520px;margin:18px auto 0;text-align:center;font:400 .8rem/1.7 var(--sans)}
.article-body .article-screenshot figcaption p{margin-top:7px;color:var(--muted);font:400 .78rem/1.7 var(--sans)}