/* ============================================================ Gallery additions — add BELOW your existing .infinite-grid CSS. ============================================================ */ /* ---- Cursor (infinite mode only) ---- */ .infinite-grid[data-gallery-mode="infinite"] { cursor: grab; } .infinite-grid[data-gallery-mode="infinite"][data-infinite-grid-status="dragging"] { cursor: grabbing; } /* ---- Masonry mode ---- */ .infinite-grid[data-gallery-mode="masonry"] { height: auto; min-height: 100svh; overflow: visible; cursor: default; touch-action: auto; } .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__collection { width: 100%; height: auto; position: relative; } .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__list { position: relative; display: block; column-count: var(--masonry-columns, 4); column-gap: 0; } .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__item { display: block; width: 100%; aspect-ratio: auto; break-inside: avoid; } .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__card, .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__card.is--landscape { width: 100%; height: auto; } .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__card-img { position: relative; height: auto; } @media (max-width: 991px) { .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__list { --masonry-columns: 3; } } @media (max-width: 767px) { .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__list { --masonry-columns: 2; } } @media (max-width: 479px) { .infinite-grid[data-gallery-mode="masonry"] .infinite-grid__list { --masonry-columns: 1; } } /* ---- Hover scale ---- Triggers on the card (not the item, which has padding/whitespace). Scales the image inside, clipped by overflow: hidden. Transition scoped to idle so it never fires during load or swap. */ .infinite-grid__card { overflow: hidden; } .infinite-grid[data-infinite-grid-status="idle"] .infinite-grid__card { cursor: zoom-in; } .infinite-grid[data-infinite-grid-status="idle"] .infinite-grid__card-img { transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .infinite-grid[data-infinite-grid-status="idle"] .infinite-grid__card:hover .infinite-grid__card-img { transform: scale(1.05); } /* ---- Action icons (download) ---- */ .infinite-grid__actions { position: absolute; bottom: 0.5em; right: 0.5em; display: flex; gap: 0.35em; z-index: 2; } .infinite-grid__action-btn { -webkit-appearance: none; appearance: none; border: none; padding: 0; margin: 0; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: white; width: 1.25em; height: 1.25em; border-radius: 0.3em; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .infinite-grid__action-btn:hover { background: rgba(0, 0, 0, 0.75); } .infinite-grid__action-btn svg { width: 0.75em; height: 0.75em; } /* ---- Lightbox ---- */ .click-zoom__lightbox { position: fixed; inset: 0; z-index: 1000; display: none; justify-content: center; align-items: center; padding: 3em; cursor: zoom-out; background-color: rgba(0, 0, 0, 0.9); } .click-zoom__lightbox>img { display: block; max-width: 100%; max-height: 100%; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; border-radius: 0.75em; }