.gallery-wrap {
    max-width:1200px; margin:40px auto; padding:0 20px }

#gallery.masonry {
    margin:0 auto; }
        
.grid-sizer, .gutter-sizer {
    width:100%; } 
        
.gallery-item {
    width:100%; margin-bottom:14px; }

@media (min-width:600px){
    .grid-sizer {
        width:calc(50% - 14px/2); }
            
    .gutter-sizer {
        width:14px; }
            
    .gallery-item {
        width:calc(50% - 14px/2); }
}
  
@media (min-width:900px){
    .grid-sizer {
        width:calc(33.333% - 2*14px/3); }
        
    .gallery-item {
        width:calc(33.333% - 2*14px/3) }
}
    
@media (min-width:1200px){
    .grid-sizer {
        width:calc(25% - 3*14px/4); }
            
    .gallery-item {
        width:calc(25% - 3*14px/4) }
}


.gallery-item {
    display:block; position:relative; border-radius:16px; overflow:hidden; background:#ffffff;
    box-shadow:0 10px 30px rgba(11,15,25,.08); transform:translateY(8px); opacity:0; transition:transform .5s ease, opacity .5s ease, box-shadow .2s ease; text-decoration:none;
    color:inherit; }
        
.gallery-item.is-visible {
    transform:translateY(0); opacity:1; }
    
.gallery-item:hover {
    box-shadow:0 12px 38px rgba(11,15,25,.12); }

.thumb-box {
    position:relative; background:#eaeef5; overflow:hidden; }
        
.thumb-box img, .thumb-box canvas {
    width:100%; height:100%; object-fit:cover; display:block; }

.gallery-item figcaption {
    padding:10px 12px 12px; font-size:13px; color:#6c7a90; background:#ffffff; border-top:1px solid #eef2f7; }

.overlay-actions {
    position:absolute; top:10px; right:10px; display:flex; gap:8px; 
    z-index:2; opacity:0; transition:opacity .2s ease; }
  
.gallery-item:hover .overlay-actions {
    opacity:1; }
        
.btn-ghost {
    appearance:none; border:1px solid rgba(15,25,40,.12); background:rgba(255,255,255,.85); padding:8px 10px; border-radius:12px;
    font-size:13px; cursor:pointer; }

.badge-video {
    position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.55); color:#fff;
    font-size:12px; padding:8px 10px; border-radius:999px; backdrop-filter:saturate(1.2) blur(4px); }
  
.wm {
    position:absolute; left:8px; bottom:8px; width:110px; height:24px;
    opacity:.55; background-repeat:no-repeat; background-position:left center; background-size:contain; pointer-events:none;
    filter:grayscale(10%) contrast(.95); }

.gallery-item:focus-visible {
    outline:3px solid #cfe2ff; outline-offset:4px }