/* === Lightbox === */
.sgm-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.92);
  display: grid;
  grid-template-areas:
    "close close close"
    "prev img next"
    "counter counter counter";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  justify-items: center;
  padding: 16px;
}

.sgm-lightbox__img {
  grid-area: img;
  max-width: 100%; max-height: 80vh;
  object-fit: contain;
}

.sgm-lightbox__close,
.sgm-lightbox__prev,
.sgm-lightbox__next {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: white;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--sgm-tx-fast);
}
.sgm-lightbox__close:hover,
.sgm-lightbox__prev:hover,
.sgm-lightbox__next:hover { background: rgba(255,255,255,.18); }
.sgm-lightbox__close { grid-area: close; justify-self: end; }
.sgm-lightbox__prev { grid-area: prev; }
.sgm-lightbox__next { grid-area: next; }

.sgm-lightbox__counter {
  grid-area: counter;
  color: rgba(255,255,255,.7);
  font-size: 13px; letter-spacing: .15em;
}

@media (max-width: 600px) {
  .sgm-lightbox {
    grid-template-columns: 44px 1fr 44px;
  }
  .sgm-lightbox__close,
  .sgm-lightbox__prev,
  .sgm-lightbox__next { width: 40px; height: 40px; font-size: 20px; }
}