.image-gallery { margin-top: var(--space-6); }
.image-gallery-main { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; aspect-ratio: 16 / 10; max-height: 620px; }
.image-gallery-main img { display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; }
.image-gallery-thumbnails { display: flex; gap: 10px; margin-top: 12px; }
.image-gallery-thumbnail { display: block; flex: 0 1 96px; min-width: 0; min-height: 44px; aspect-ratio: 4 / 3; margin: 0; padding: 3px; overflow: hidden; border: 2px solid var(--line); border-radius: 4px; background: #080d14; color: inherit; cursor: pointer; text-decoration: none; }
.image-gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-gallery-thumbnail:hover { border-color: #829bb0; }
.image-gallery-thumbnail[aria-current="true"], .image-gallery-thumbnail[aria-pressed="true"] { border-color: var(--cyan); }
.image-gallery-thumbnail:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.image-gallery-controls { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.image-gallery-controls[hidden] { display: none; }
.image-gallery-position { min-width: 58px; color: var(--muted); text-align: center; font-size: var(--font-caption); font-variant-numeric: tabular-nums; }
.project-image-gallery .image-gallery-main { aspect-ratio: 4 / 3; }
@media (max-width: 600px) {
    .image-gallery { margin-top: var(--space-5); }
}
@media (forced-colors: active) {
    .image-gallery-thumbnail[aria-current="true"], .image-gallery-thumbnail[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

.project-image-gallery .image-gallery-stage { position: relative; }
.project-image-gallery .project-gallery-video { position: absolute; inset: 0; margin: 0; }
.project-image-gallery .project-gallery-video[hidden] { display: none; }
.project-image-gallery .project-gallery-video .youtube-video-stage { height: 100%; aspect-ratio: auto; }
.project-image-gallery .image-gallery-thumbnails { overflow-x: auto; padding-bottom: 4px; }
.project-image-gallery .image-gallery-thumbnail { position: relative; flex: 0 0 96px; }
.project-media-thumbnail-play { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: calc(var(--control-icon-size) + var(--space-2)); height: calc(var(--control-icon-size) + var(--space-2)); border-radius: 50%; background: #080d14df; }
.project-media-thumbnail-play svg { width: var(--control-icon-size); height: var(--control-icon-size); }
.project-media-viewer-title { margin: var(--space-3) 0 0; font-size: var(--font-caption); font-weight: 600; }
.project-media-viewer-title[hidden] { display: none; }
.project-image-gallery .image-gallery-controls { position: relative; z-index: 1; }