.odfgal-gallery, .odfgal-gallery * { box-sizing: border-box; } .odfgal-grid { display: flex; flex-wrap: wrap; /* actual per-row gap is set inline by JS (matches the shortcode's gap="" attribute) via the --odfgal-gap custom property below; this fallback only applies before JS has run. */ gap: var( --odfgal-gap, 8px ); } .odfgal-item { position: relative; display: block; overflow: hidden; background: #eee; /* Width/height are set inline by JS per photo, computed from the justified-row layout — see odfgal-gallery.js. Until that runs (or if JS fails to load), items just wrap naturally at their thumbnail's own rendered size, which still looks reasonable. */ } .odfgal-item img { display: block; width: 100%; height: 100%; object-fit: cover; /* covers the rare sub-pixel rounding gap between a row's computed box and the photo's exact aspect ratio */ } /* ------------------------------------------------------------------ */ /* Grid layout (layout="grid") — equal-size square tiles, symmetric */ /* both horizontally AND vertically (unlike "justified", where only */ /* row width is exact and row heights vary). Pure CSS Grid: no JS */ /* math needed, and it re-flows on resize automatically for free. */ /* auto-fill + minmax() is what makes the column count responsive — */ /* the browser fits as many --odfgal-tile-min-or-wider columns as the */ /* container allows, then stretches them all equally (1fr) to fill */ /* the remaining width exactly, so every row is edge-to-edge with no */ /* leftover gap, same as the justified layout's own row-fill goal, */ /* just achieved column-wise instead of row-by-row. */ .odfgal-gallery[data-layout="grid"] .odfgal-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( min( var( --odfgal-tile-min, 150px ), 100% ), 1fr ) ); } .odfgal-gallery[data-layout="grid"] .odfgal-item { width: auto; height: auto; aspect-ratio: 1 / 1; /* square tiles */ } .odfgal-item::after { content: ''; position: absolute; inset: 0; background: rgba( 0, 0, 0, 0 ); transition: background-color .15s ease; pointer-events: none; } .odfgal-item:hover::after, .odfgal-item:focus-visible::after { background: rgba( 0, 0, 0, .12 ); } .odfgal-item:focus-visible { outline: 2px solid #a11; outline-offset: -2px; } /* ------------------------------------------------------------------ */ /* Lightbox */ /* ------------------------------------------------------------------ */ /* Re-parented to at runtime by odfgal-gallery.js (same reason as ODF Quick Registration's mobile success popup: a fixed-position element nested inside a Divi module/section wrapper that creates its own stacking context — a hover transform, sticky element, etc — can render trapped behind other page content no matter how high its z-index is, unless it's moved out to be a direct child of ). The max z-index here is the same second line of defense used there. */ .odfgal-lightbox { position: fixed; inset: 0; z-index: 2147483647; background: rgba( 0, 0, 0, .92 ); display: flex; align-items: center; justify-content: center; padding: 3.5rem 1rem 5rem; } .odfgal-lightbox[hidden] { display: none; } .odfgal-lightbox-figure { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; } .odfgal-lightbox-img { max-width: 90vw; max-height: 78vh; width: auto; height: auto; object-fit: contain; background: #111; box-shadow: 0 4px 40px rgba( 0, 0, 0, .5 ); } .odfgal-lightbox-img[hidden] { display: none; } .odfgal-lightbox-spinner { width: 2.5rem; height: 2.5rem; border: 3px solid rgba( 255, 255, 255, .25 ); border-top-color: #fff; border-radius: 50%; animation: odfgal-spin .8s linear infinite; } @keyframes odfgal-spin { to { transform: rotate( 360deg ); } } .odfgal-lightbox-caption { color: #eee; font-size: .95rem; text-align: center; margin-top: 1rem; max-width: 60ch; } .odfgal-lightbox-counter { color: #bbb; font-size: .8rem; margin-top: .35rem; } .odfgal-lightbox-btn { position: fixed; display: inline-flex; align-items: center; justify-content: center; background: rgba( 0, 0, 0, .45 ); color: #fff; border: none; border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.4rem; line-height: 1; cursor: pointer; } .odfgal-lightbox-btn:hover { background: rgba( 0, 0, 0, .7 ); } .odfgal-lightbox-btn:disabled { opacity: .3; cursor: not-allowed; } .odfgal-lightbox-close { top: 1rem; right: 1rem; font-size: 1.6rem; } .odfgal-lightbox-prev { left: 1rem; top: 50%; transform: translateY( -50% ); } .odfgal-lightbox-next { right: 1rem; top: 50%; transform: translateY( -50% ); } @media ( max-width: 600px ) { .odfgal-lightbox { padding: 3rem .5rem 4rem; } .odfgal-lightbox-btn { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; } .odfgal-lightbox-prev { left: .35rem; } .odfgal-lightbox-next { right: .35rem; } .odfgal-lightbox-close { top: .5rem; right: .5rem; } .odfgal-lightbox-img { max-height: 70vh; } }