/* Projecten (2026-10-12): the block after every picked main section (vouw/projecten.js). The head is the service
   pages' own (.dk, .kop in ../diensten/badkamer-renovatie/dienst.css; no lead since 10-12). The row is x1's as he picked it
   (x.css before 10-12): the site's "+N" row (style.css draws the tile, script.js lays it out) at the size the service
   pages give their projects tiles: one size, 5:6, rounded, the card shadow; five cells across, four from 860 px down,
   three on a phone. --plekken tells script.js how many cells the line has, the "+N" included. */
/* its own ground, gips-licht: none of the picks ends on it (x1 and q3 end on kalk, t2's last band is kalk-wit) and the
   questions after it stand on kalk, so the block reads as a section of its own under every pattern */
.svproj { background: var(--gips-licht); }
.svproj .kop { margin-bottom: clamp(14px, 1.6vw, 20px); }
.svproj__duimen {
  --plekken: 5;
  display: grid; grid-template-columns: repeat(var(--plekken), minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0;
  list-style: none; align-items: start;
}
.svproj__duimen > li { min-width: 0; }
.svproj__duimen .duim { width: 100%; height: auto; aspect-ratio: 5 / 6; border-radius: var(--r); box-shadow: var(--shadow-1); }
.svproj__duimen .duim:hover { box-shadow: 0 0 0 2px var(--dakpan), var(--shadow-1); transform: none; }

@media (max-width: 860px) {
  .svproj__duimen { --plekken: 4; }
}
@media (max-width: 560px) {
  .svproj__duimen { --plekken: 3; gap: 8px; }
}