.gallery-demo { max-width: 1160px; margin-inline: auto; }
.gallery-viewer { display: grid; gap: 18px; }
.gallery-viewer__main { margin: 0; padding: 10px; border: 1px solid var(--line, #dce4ed); border-radius: var(--radius, 8px); background: #fff; box-shadow: 0 12px 32px rgba(12,36,61,.12); }
.gallery-viewer__main img { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: contain; cursor: zoom-in; }
.gallery-viewer__main figcaption { padding: 10px 4px 2px; color: var(--dark-2, #274361); font-weight: 600; }
.gallery-viewer__thumbs { display: flex; gap: 12px; overflow-x: auto; padding: 3px 2px 10px; }
.gallery-viewer__thumb { flex: 0 0 clamp(145px, 20vw, 220px); padding: 7px; text-align: left; cursor: pointer; border: 1px solid var(--line, #dce4ed); border-radius: var(--radius, 8px); background: #fff; color: inherit; }
.gallery-viewer__thumb img { display: block; width: 100%; height: auto; border-radius: 3px; }
.gallery-viewer__thumb span { display: block; padding-top: 7px; font-size: .85rem; }
.gallery-viewer__thumb:hover, .gallery-viewer__thumb.is-selected { border-color: var(--accent, #1683e8); box-shadow: 0 0 0 2px rgba(22,131,232,.16); }
.gallery-viewer__thumb:focus-visible { outline: 2px solid var(--accent, #1683e8); outline-offset: 3px; }