/* lock scroll */
.glb-lock { overflow: hidden; }

/* modal */
.glb-modal { position: fixed; inset: 0; display: none; z-index: 10000; }
.glb-modal.glb-open { display: block; }
.glb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }

.glb-content {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 56px 1fr auto 32px;
  align-items: center; justify-items: center; padding: 12px;
}

.glb-img {
  grid-column: 1 / -1; grid-row: 2 / 3;
  max-width: 92vw; max-height: 78vh; background:#111; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.glb-caption { grid-column: 2; grid-row: 3; margin-top:12px; color:#eee; font-size:14px; text-align:center; }

.glb-nav, .glb-close {
  background: rgba(0,0,0,.55); color:#fff; border:0; cursor:pointer;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:22px; transition: background .2s ease, transform .1s ease;
}
.glb-prev { 
    grid-column:1; grid-row:2;  
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 10;
    padding: 0;
}
.glb-next { 
    grid-column:3; 
    grid-row:2;
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 10;
    padding: 0;
}
.glb-close { 
    grid-column:3; 
    grid-row:1; 
    font-size:25px; 
    width:40px; 
    height:40px; 
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 10;
    padding: 0;
}
.glb-nav:hover, .glb-close:hover { 
    background: rgba(0,0,0,.7); 
    transform: scale(1.04);
}