body {
  background: var(--pe-bg, #0f1116); 
}
.portfolio-wrap { padding-top: 96px; }

/* Grid layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.grid-item img {
  display: block;
  width: 100%;
  height: 240px; /* consistent rows, change/remove if you want masonry */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.grid-item img:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(0,0,0,.8);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s ease;
}
.lightbox.show { opacity: 1; }
.lightbox-inner {
  position: relative; max-width: 92vw; max-height: 88vh;
}
.lightbox img {
  max-width: 100%; max-height: 80vh;
  border-radius: 12px;
}
.caption {
  color: #cfd3da; margin-top: .5rem; text-align: center;
}
.lightbox-close {
  position: absolute; top: -14px; right: -14px;
  width: 36px; height: 36px; border-radius: 999px;
  border: 0; background: #6f63ff; color: #fff;
  font-size: 1.4rem; cursor: pointer;
  box-shadow: 0 8px 18px rgba(111,99,255,.35);
}