.gallery { width: min(1288px, calc(100% - 40px)); margin-inline: auto; padding-block: 28px 42px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; column-gap: 12px; row-gap: 20px; align-content: start; }
.gallery-status { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
.gallery-arrow { grid-row: 2; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 8px; border: 1px solid #d8e3f0; border-radius: 10px; background: #fff; color: var(--brand-secondary); cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.gallery-arrow.previous { grid-column: 1; }
.gallery-arrow.next { grid-column: 3; }
.gallery-arrow span { width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.gallery-arrow.previous span { transform: rotate(-135deg); }
.gallery-arrow:hover:not(:disabled) { background: #f5f8ff; border-color: var(--brand-primary); color: var(--brand-primary); }
.gallery-arrow:disabled { opacity: .5; cursor: default; }
.gallery-arrow:focus-visible { outline: 3px solid rgb(50 169 245 / 35%); outline-offset: 2px; }
.gallery > noscript { grid-column: 2; }
.gallery-viewport { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; }
.gallery-track { display: flex; transition: transform 220ms ease; }
.gallery-page { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 12px; aspect-ratio: 1; }
.gallery-card { position: relative; display: block; min-width: 0; min-height: 0; aspect-ratio: 1; overflow: hidden; background: #000; border-radius: 8px; }
.gallery-card img { display: block; width: 100%; height: 100%; object-fit: scale-down; object-position: center center; }
.gallery-card-name { position: absolute; right: 0; bottom: 0; left: 0; padding: 6px 10px; overflow: hidden; background: rgb(128 128 128 / 50%); color: #fff; font-size: .82rem; text-shadow: 0 1px 2px #000; white-space: nowrap; text-overflow: ellipsis; }
.gallery-card:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) { .gallery-track, .gallery-arrow { transition: none; } }