.nanogit-screenshots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.nanogit-shot { margin: 0; min-width: 0; scroll-margin-top: 1.5rem; }
.nanogit-shot-link { display: block; border: 1px solid var(--nanogit-border); border-radius: .75rem; overflow: hidden; text-decoration: none; }
.nanogit-shot-link img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #f5f5f7; }
.nanogit-shot-caption { display: flex; justify-content: space-between; padding: .85rem 1rem; font-size: 1rem; background: var(--nanogit-surface); }
.nanogit-shot figcaption { padding-top: .65rem; font-size: .875rem; line-height: 1.8; color: var(--nanogit-text-secondary); }
.nanogit-shot-link:hover { border-color: #fff; }
.nanogit-shot-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.nanogit-workflow-copy .nanogit-real-view { display: inline-flex; align-items: center; min-height: 44px; gap: .5rem; }
@media (max-width: 767px) { .nanogit-screenshots { grid-template-columns: 1fr; gap: 1.5rem; } }