[data-gallery] .gallery { --row-height: 160; position: relative; display: flex; flex-wrap: wrap; gap: 4px; }
[data-gallery] .imgframe { display: block; width: calc(50% - 2px); margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.08); cursor: pointer; }
[data-gallery] .imgframe img { display: block; width: 100%; height: auto; margin: 0; border: 0; }
[data-gallery] .gallery-ready { display: flex; flex-direction: column; }
[data-gallery] .gallery-row { display: flex; gap: 4px; align-items: flex-start; }
[data-gallery] .gallery-ready .imgframe { flex: 0 1 auto; min-width: 0; }
[data-gallery] .gallery-ready .imgframe img { height: 100%; object-fit: contain; }
[data-gallery] .imgframe:focus-visible { outline: 3px solid #684b87; outline-offset: -3px; z-index: 1; }
.inline-gallery-photo { display: block; width: fit-content; max-width: 100%; margin-inline: auto; cursor: zoom-in; }
.inline-gallery-photo > img { display: block; max-width: 100%; height: auto; }
.inline-gallery-photo:focus-visible { outline: 3px solid #684b87; outline-offset: 3px; }
@media (min-width: 600px) { [data-gallery] .gallery { --row-height: 210; } }
@media (min-width: 1200px) { [data-gallery] .gallery { --row-height: 260; } }
@media (min-width: 1440px) { [data-gallery] .gallery { --row-height: 300; } }
[data-gallery] .lightbox { box-sizing: border-box; border: 0; background: var(--lightbox-panel); color: var(--page-text); padding: 10px; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-gallery] .lightbox::backdrop { background: rgba(0,0,0,.3); }
[data-gallery] .lightbox-photo { position: relative; width: fit-content; max-width: 100%; }
[data-gallery] .lightbox-photo > img { display: block; max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; }
[data-gallery] .photo-navigation { position: absolute; top: 0; bottom: 0; width: 50%; padding: 0; border: 0; background: transparent; color: white; cursor: pointer; }
[data-gallery] .photo-previous { left: 0; text-align: left; }
[data-gallery] .photo-next { right: 0; text-align: right; }
[data-gallery] .photo-navigation span { display: inline-block; padding: 10px; font-weight: bold; background: rgba(0,0,0,.5); opacity: 0; }
[data-gallery] .photo-navigation:hover span, [data-gallery] .photo-navigation:focus-visible span { opacity: 1; }
@media (hover: none) { [data-gallery] .photo-navigation span { opacity: 1; } }
[data-gallery] .lightbox-title { border: 0; padding: 0 0 8px; font-size: .875rem; display: flex; align-items: center; justify-content: space-between; }
[data-gallery] .lightbox-title > button { box-sizing: border-box; display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; margin: 0; padding: 0; line-height: 1; }
[data-gallery] .lightbox-download { font-size: .85em; white-space: nowrap; }