/* ============================================================
   PROJECTOVERVIEW.CSS  –  Projecten-masonry op de homepagina
   ============================================================ */

.projects-home {
  /* 12-koloms grid (zie .grid-12 in style.css) */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  padding: 40px var(--grid-margin) 80px;
}

.projects-home > * { grid-column: 1 / -1; }

.projects-home .page-title { margin-bottom: 36px; }

/* masonry kolommen */
.masonry {
  column-count: 3;
  column-gap: 22px;
}

@media (max-width: 1000px) { .masonry { column-count: 2; } }
@media (max-width: 600px)  { .masonry { column-count: 1; } }

.masonry .poleroid {
  break-inside: avoid;
  margin-bottom: 22px;
}
/* het polaroid-frame en de grijswaarden/hover-kleur staan in image.css */

/* "benieuwd naar meer?" blok */
.more-work {
  /* 12-koloms grid (zie .grid-12 in style.css) */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  padding: 0 var(--grid-margin) 90px;
}

.more-work > * { grid-column: 1 / -1; }

/* knop niet over de volle breedte, alleen zo breed als de knop zelf */
.more-work .btn { justify-self: start; }
.more-work h3 {
  font-family: var(--font-title);
  color: var(--blauw);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 18px;
}

@media screen and (max-width: 768px) {
  .projects-home { padding: 30px var(--grid-margin) 60px; }
  .more-work { padding: 0 var(--grid-margin) 60px; }
}