/* Base variables driven by inline style */ .blg-gallery { --blg-gap: 16px; --blg-cols-desktop: 5; --blg-cols-mobile: 2; } /* Squares layout: CSS grid with responsive columns */ .blg-squares { display: grid; gap: var(--blg-gap); grid-template-columns: repeat(var(--blg-cols-desktop), minmax(0, 1fr)); } @media (max-width: 768px) { .blg-squares { grid-template-columns: repeat(var(--blg-cols-mobile), minmax(0, 1fr)); } } /* Mosaic layout: column-based masonry */ .blg-mosaic { column-count: var(--blg-cols-desktop); column-gap: var(--blg-gap); } @media (max-width: 768px) { .blg-mosaic { column-count: var(--blg-cols-mobile); } } /* Shared tile styling */ .blg-tile { border: 0; padding: 0; background: transparent; cursor: zoom-in; display: inline-block; /* required for column-based masonry */ width: 100%; margin: 0 0 var(--blg-gap); position: relative; overflow: hidden; border-radius: 8px; transition: transform 120ms ease, box-shadow 120ms ease; } .blg-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); } .blg-tile:focus { outline: 2px solid #4c9ffe; outline-offset: 2px; } /* Images: cover for squares; natural height for mosaic */ .blg-squares .blg-tile { aspect-ratio: 1 / 1; } .blg-squares .blg-tile img { width: 100%; height: 100%; object-fit: cover; } .blg-mosaic .blg-tile img { width: 100%; height: auto; display: block; } /* Lightbox (appended to ) */ .blg-lightbox { position: fixed; inset: 0; z-index: 9999; display: none; } .blg-lightbox[aria-hidden="false"] { display: block; } /* Backdrop covers screen and handles outside-click close */ .blg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); } /* Modal defines outer gap so page edges remain visible */ .blg-modal { position: absolute; inset: 4vh 4vw; display: flex; align-items: center; justify-content: center; } /* Image respects aspect ratio and never exceeds modal */ .blg-full { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 220ms ease; opacity: 0; } .blg-full.blg-active { opacity: 1; } /* Close button: top-right corner overlapping the image area */ .blg-close { position: absolute; top: 4vh; right: 4vw; border: 0; background: rgba(0,0,0,0.55); color: #fff; font-size: 24px; line-height: 1; border-radius: 6px; width: 36px; height: 36px; cursor: pointer; } /* Navigation arrows */ .blg-nav { position: absolute; top: 50%; transform: translateY(-50%); border: 0; background: rgba(0,0,0,0.55); color: #fff; font-size: 28px; line-height: 1; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; transition: background 120ms ease; } .blg-nav:hover { background: rgba(0,0,0,0.7); } .blg-prev { left: 4vw; } .blg-next { right: 4vw; }