html, body {
  overflow-x:hidden;
}

/* GRID */

.work-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
  gap:36px;
  padding:30px 0;
}

/* ITEM */

.work-item {
  position:relative;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.work-inner {
  position:relative;
  border-radius:12px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  will-change:transform;
}

.work-item:hover .work-inner {
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

/* IMAGE */

.placeholder {
  width:100%;
  height:100%;
  aspect-ratio:16/10;
  border-radius:12px;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* COLOURS */

.red { background:#ef4444; }
.orange { background:#f97316; }
.blue { background:#3b82f6; }
.green { background:#22c55e; }
.purple { background:#a855f7; }
.yellow { background:#facc15; }
.pink { background:#ec4899; }
.cyan { background:#06b6d4; }

/* STACK */

.stack {
  position:relative;
  width:100%;
  aspect-ratio:16/10;
}

.stack .placeholder {
  position:absolute;
  inset:0;
}

.album .stack .placeholder:nth-child(1) {
  z-index:3;
  transform:scale(1);
}

.album .stack .placeholder:nth-child(2) {
  transform:rotate(-10deg) translate(10px,10px) scale(0.96);
  z-index:2;
  opacity:0.9;
}

.album .stack .placeholder:nth-child(3) {
  transform:rotate(10deg) translate(-10px,10px) scale(0.92);
  z-index:1;
  opacity:0.8;
}

/* TITLE */

.work-title {
  position:absolute;
  left:10px;
  bottom:10px;
  padding:2px 4px;
  font-size:14px;
  font-weight:500;
  color:#fff;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:8px;
  z-index:5;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  pointer-events:none;
  letter-spacing:0.2px;
}

/* ALBUM BADGE */

.album::after {
  content:"+" attr(data-count);
  position:absolute;
  bottom:10px;
  right:10px;
  background:rgba(0,0,0,0.7);
  color:#fff;
  font-size:17px;
  font-weight:600;
  padding:2px 4px;
  border-radius:8px;
  z-index:10;
}

/* LIGHTBOX */

.lightbox {
  display:none;
  position:fixed;
  inset:0;
  z-index:999;
  background:#000;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

.lightbox-img {
  max-width:90%;
  max-height:80%;
  border-radius:10px;
}

.lightbox-title {
  color:#fff;
  margin-top:10px;
  font-size:16px;
}

.close {
  position:absolute;
  top:20px;
  right:30px;
  font-size:30px;
  color:#fff;
  cursor:pointer;
}

.prev,
.next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:none;
  color:#fff;
  border:none;
  font-size:40px;
  cursor:pointer;
  padding:10px;
}

.prev { left:20px; }
.next { right:20px; }

/* RESPONSIVE */

@media (max-width:600px) {
  .lightbox-img {
    max-width:95%;
    max-height:70%;
  }

  .work-title {
    font-size:14px;
  }

  .prev,
  .next {
    font-size:30px;
  }
}