/* WORK — photo gallery. Change photo height or dark background here. */

.work {
  background: var(--color-ink);
  color: #f3eee4;
}

.work .eyebrow {
  color: var(--color-primary);
}

.work-head {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.work-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
}

.work-head p {
  color: oklch(0.9 0.02 90 / 0.7);
  max-width: 48ch;
}

.work-grid {
  display: grid;
  gap: var(--space-4);
}

.work-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  min-height: 240px;
}

.work-item img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

.work-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-5);
  background: linear-gradient(180deg, transparent, oklch(0.1 0.02 250 / 0.78));
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.work-item.tall {
  min-height: 420px;
}

.work-item.tall img {
  min-height: 420px;
}

@media (min-width: 768px) {
  .work-grid {
    grid-template-columns: 1.2fr 0.8fr 1fr;
    grid-template-rows: auto auto;
  }

  .work-item:nth-child(1) {
    grid-row: span 2;
  }
}