.gallery-grid button.gallery-tile{
  grid-column:span 1;
  grid-row:span 1;
  overflow:hidden;
  display:block;
  position:relative;
  border:1px solid var(--line);
  background:var(--panel);
  padding:0;
  cursor:pointer;
  width:100%;
  height:100%;
  min-height:0;
  align-self:stretch;
}
.gallery-grid button.gallery-tile.tall{grid-row:span 2;}
.gallery-grid button.gallery-tile.wide{grid-column:span 2;}
.gallery-grid button.gallery-tile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}
.gallery-grid button.gallery-tile:hover img{transform:scale(1.05);}

.portfolio-lightbox{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
}
.portfolio-lightbox[hidden]{display:none !important;}
.portfolio-lightbox-open{overflow:hidden;}
.portfolio-lightbox__backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.88);
}
.portfolio-lightbox__dialog{
  position:relative; z-index:1; width:min(96vw, 1200px); max-height:94vh;
  display:flex; align-items:center; justify-content:center; padding:48px 56px;
}
.portfolio-lightbox__figure{
  margin:0; max-width:100%; max-height:88vh; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:40vh;
}
.portfolio-lightbox__figure img{
  max-width:min(92vw, 1100px);
  max-height:80vh;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
  border-radius:4px;
  background:rgba(255,255,255,.04);
  -webkit-user-drag:none;
  user-select:none;
}
.portfolio-lightbox__figure.is-loading img{opacity:.35;}
.portfolio-lightbox__figure figcaption{
  color:#ddd; font-size:14px; margin-top:10px;
}
.portfolio-lightbox__close,
.portfolio-lightbox__nav{
  position:absolute; border:0; background:rgba(255,255,255,.12); color:#fff;
  width:44px; height:44px; border-radius:50%; font-size:28px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.portfolio-lightbox__close{top:12px; right:12px;}
.portfolio-lightbox__nav--prev{left:8px; top:50%; transform:translateY(-50%);}
.portfolio-lightbox__nav--next{right:8px; top:50%; transform:translateY(-50%);}
.portfolio-lightbox__close:hover,
.portfolio-lightbox__nav:hover{background:rgba(255,255,255,.22);}
.portfolio-lightbox__counter{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  color:#ccc; font-size:13px; letter-spacing:.04em;
}

@media (max-width: 640px){
  .portfolio-lightbox__dialog{padding:40px 12px;}
  .portfolio-lightbox__nav{width:36px; height:36px; font-size:22px;}
  .portfolio-lightbox__figure img{max-height:72vh;}
}