/* ========================================================= Hover Gallery — Frontend styles ========================================================= */ .hg-gallery { display: grid; grid-template-columns: repeat(var(--hg-cols, 3), 1fr); gap: var(--hg-gap, 12px); margin: 0; padding: 0; list-style: none; } .hg-item { margin: 0; padding: 0; } /* Image wrapper — always square */ .hg-img-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f0f0f0; border-radius: 4px; display: block; } /* Both images cover the wrap */ .hg-img-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; max-width: none; } /* ========================================================= Effect: Image Swap ========================================================= */ .hg-effect-swap .hg-img-main { z-index: 1; opacity: 1; transition: opacity 0.35s ease; will-change: opacity; } .hg-effect-swap .hg-img-hover { z-index: 2; opacity: 0; transition: opacity 0.35s ease; will-change: opacity; } .hg-effect-swap .hg-item:hover .hg-img-hover { opacity: 1; } .hg-effect-swap .hg-item:hover .hg-img-main { opacity: 0; } /* ========================================================= Effect: Zoom (magnifier lens) ========================================================= */ .hg-effect-zoom .hg-img-wrap { cursor: crosshair; } .hg-effect-zoom .hg-img-main { z-index: 1; } /* Lens overlay on the source image */ .hg-zoom-lens { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.12); pointer-events: none; z-index: 10; display: none; box-sizing: border-box; transform: translate(-50%, -50%); } /* Zoom result panel — appended to by JS */ .hg-zoom-result { position: fixed; width: 260px; height: 260px; border: 2px solid #fff; border-radius: 6px; background-color: #f0f0f0; background-repeat: no-repeat; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); z-index: 99999; pointer-events: none; display: none; overflow: hidden; } /* ========================================================= Caption ========================================================= */ .hg-caption { padding: 8px 4px 4px; } .hg-title { margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: inherit; } .hg-desc { margin: 0; padding: 0; font-size: 13px; line-height: 1.5; color: #666; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 768px) { .hg-gallery[style*="--hg-cols:4"], .hg-gallery[style*="--hg-cols:5"], .hg-gallery[style*="--hg-cols:6"] { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 540px) { .hg-gallery { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 340px) { .hg-gallery { grid-template-columns: 1fr !important; } }