.kvpg { --kvpg-ease: cubic-bezier(.2,.7,.2,1); width: 100%; display: grid; grid-template-columns: repeat(var(--kvpg-cols,4), minmax(0,1fr)); gap: var(--kvpg-gap,14px); }
.kvpg *, .kvpg *::before, .kvpg *::after { box-sizing: border-box; }
.kvpg .kvpg-item { position: relative; display: block; overflow: hidden; margin: 0; background: #f4f4f4; aspect-ratio: var(--kvpg-ratio,1/1); cursor: zoom-in; text-decoration: none; outline: 1.5px solid transparent; outline-offset: -1.5px; transition: box-shadow .3s, outline-color .25s; }
.kvpg .kvpg-img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; transition: transform .6s var(--kvpg-ease); }
.kvpg .kvpg-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(252,102,4,.28)); opacity: 0; transition: opacity .35s; pointer-events: none; }
.kvpg .kvpg-item:hover, .kvpg .kvpg-item:focus-visible { box-shadow: 0 14px 30px rgba(252,102,4,.18); outline-color: var(--kvpg-accent,#fc6604); }
.kvpg .kvpg-item:hover .kvpg-img, .kvpg .kvpg-item:focus-visible .kvpg-img { transform: scale(1.07); }
.kvpg .kvpg-item:hover::after, .kvpg .kvpg-item:focus-visible::after { opacity: 1; }
div.kvpg-item { cursor: default; }
/* masonry: each photo keeps its own shape */
.kvpg.kvpg-masonry { display: block; column-count: var(--kvpg-cols,4); column-gap: var(--kvpg-gap,14px); }
.kvpg-masonry .kvpg-item { aspect-ratio: auto; break-inside: avoid; margin: 0 0 var(--kvpg-gap,14px); }
.kvpg-masonry .kvpg-img { height: auto; }
/* reveal on scroll */
@keyframes kvpg-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.kvpg.kvpg-js .kvpg-item:not(.kvpg-in) { opacity: 0; visibility: hidden; }
.kvpg.kvpg-js .kvpg-item.kvpg-in { animation: kvpg-up .6s var(--kvpg-ease) var(--d,0ms) backwards; }
@media (max-width: 1000px) { .kvpg:not(.kvpg-masonry) { grid-template-columns: repeat(min(var(--kvpg-cols,4),3), minmax(0,1fr)); } .kvpg.kvpg-masonry { column-count: min(var(--kvpg-cols,4),3); } }
@media (max-width: 600px) { .kvpg:not(.kvpg-masonry) { grid-template-columns: repeat(var(--kvpg-cols-m,2), minmax(0,1fr)); } .kvpg.kvpg-masonry { column-count: var(--kvpg-cols-m,2); } .kvpg { gap: min(var(--kvpg-gap,14px),10px); column-gap: min(var(--kvpg-gap,14px),10px); } .kvpg-masonry .kvpg-item { margin-bottom: min(var(--kvpg-gap,14px),10px); } }

/* lightbox */
.kvpg-lb { position: fixed; inset: 0; z-index: 999999; display: none; background: rgba(12,12,12,.94); }
.kvpg-lb.kvpg-open { display: block; animation: kvpg-fade .3s ease; }
.kvpg-lb *, .kvpg-lb *::before, .kvpg-lb *::after { box-sizing: border-box; }
.kvpg-lb-stage { position: absolute; inset: 56px 70px; display: flex; align-items: center; justify-content: center; }
.kvpg-lb-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .25s; }
.kvpg-lb-img.kvpg-swap { opacity: 0; }
.kvpg-lb button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; transition: background .25s, transform .3s; }
.kvpg-lb button:hover, .kvpg-lb button:focus-visible { background: var(--kvpg-accent,#fc6604); outline: none; }
.kvpg-lb button svg { width: 22px; height: 22px; }
.kvpg-lb-close { right: 14px; top: 10px; } .kvpg-lb-close:hover { transform: rotate(90deg); }
.kvpg-lb-prev { left: 12px; top: 50%; margin-top: -23px; } .kvpg-lb-next { right: 12px; top: 50%; margin-top: -23px; }
.kvpg-lb-count { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #bbb; font: 400 13px/1 system-ui, sans-serif; }
body.kvpg-lock { overflow: hidden; }
@keyframes kvpg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) { .kvpg-lb-stage { inset: 56px 0 44px; } .kvpg-lb-prev { left: 6px; } .kvpg-lb-next { right: 6px; } .kvpg-lb-prev, .kvpg-lb-next { width: 40px; height: 40px; margin-top: -20px; } }
@media (prefers-reduced-motion: reduce) { .kvpg.kvpg-js .kvpg-item:not(.kvpg-in) { opacity: 1; visibility: visible; } .kvpg.kvpg-js .kvpg-item.kvpg-in, .kvpg-lb.kvpg-open { animation: none; } .kvpg *, .kvpg-lb * { transition-duration: .01ms !important; } }