.ggi-gallery{display:grid;width:100%}
.ggi-item{display:block;overflow:hidden;border-radius:6px;background:#111;position:relative;cursor:zoom-in}
.ggi-item img,.ggi-item video,.ggi-item iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.ggi-item.ggi-video{cursor:pointer}
.ggi-item.ggi-video::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25);pointer-events:none;transition:background .2s}
.ggi-item.ggi-video::before{content:"";position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.65) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") no-repeat center/32px 32px;pointer-events:none;transition:transform .2s,background .2s;z-index:2}
.ggi-item.ggi-video:hover::before{transform:scale(1.1);background-color:rgba(255,255,255,.95)}
.ggi-item.ggi-video:hover::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M8 5v14l11-7z'/></svg>")}
.ggi-item.ggi-video:hover::after{background:rgba(0,0,0,.1)}

.ggi-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:999999}
.ggi-lightbox .ggi-stage{max-width:95vw;max-height:90vh;display:flex;align-items:center;justify-content:center}
.ggi-lightbox .ggi-stage img,.ggi-lightbox .ggi-stage video{max-width:95vw;max-height:90vh;object-fit:contain;display:block}
.ggi-lightbox .ggi-stage iframe{width:90vw;height:80vh;max-width:1280px;border:0;background:#000}
.ggi-lightbox button{position:absolute;background:rgba(0,0,0,.5);color:#fff;border:0;cursor:pointer;font-size:28px;line-height:1;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ggi-lightbox button:hover{background:rgba(255,255,255,.2)}
.ggi-lightbox .ggi-close{top:20px;right:24px;font-size:32px}
.ggi-lightbox .ggi-prev{left:24px;top:50%;transform:translateY(-50%)}
.ggi-lightbox .ggi-next{right:24px;top:50%;transform:translateY(-50%)}
.ggi-lightbox .ggi-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font:14px/1 system-ui,sans-serif;background:rgba(0,0,0,.5);padding:6px 12px;border-radius:20px}

@media (max-width:768px){
  .ggi-gallery .ggi-item{height:auto !important;aspect-ratio:1/1}
  .ggi-lightbox button{width:40px;height:40px;font-size:22px}
  .ggi-lightbox .ggi-close{top:10px;right:10px}
  .ggi-lightbox .ggi-prev{left:8px}
  .ggi-lightbox .ggi-next{right:8px}
}
@media (max-width:480px){
  .ggi-gallery .ggi-item{height:auto !important;aspect-ratio:1/1}
}

/* Pagination */
.ggi-gallery-wrap{position:relative}
.ggi-gallery-wrap .ggi-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(0,0,0,.55);color:#fff;border:0;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.ggi-gallery-wrap .ggi-nav:hover{background:rgba(0,0,0,.85)}
.ggi-gallery-wrap .ggi-nav-prev{left:-22px}
.ggi-gallery-wrap .ggi-nav-next{right:-22px}
.ggi-pager{text-align:center;margin-top:10px;font:14px/1 system-ui,sans-serif;color:#555}
@media (max-width:768px){
  .ggi-gallery-wrap .ggi-nav{width:36px;height:36px;font-size:18px}
  .ggi-gallery-wrap .ggi-nav-prev{left:4px}
  .ggi-gallery-wrap .ggi-nav-next{right:4px}
}