GalleryGrid Sections

---
/**
 * GalleryGrid
 * Fotogalerij in een masonry-achtig grid. Geschikt voor portfolio,
 * projecten of sfeerbeelden.
 */
interface Props {
  headline?: string;
  sub?: string;
  images: { src: string; alt?: string; caption?: string }[];
  columns?: 2 | 3 | 4;
  gap?: 'sm' | 'md' | 'lg';
}
const { headline, sub, images, columns = 3, gap = 'md' } = Astro.props;
---
<section class={`gg gg--cols-${columns} gg--gap-${gap}`}>
  <div class="gg-inner">
    {(headline || sub) && (
      <div class="gg-header">
        {headline && <h2 class="gg-headline">{headline}</h2>}
        {sub && <p class="gg-sub">{sub}</p>}
      </div>
    )}
    <div class="gg-grid">
      {images.map(img => (
        <figure class="gg-figure">
          <img src={img.src} alt={img.alt ?? ''} class="gg-img" loading="lazy" />
          {img.caption && <figcaption class="gg-caption">{img.caption}</figcaption>}
        </figure>
      ))}
    </div>
  </div>
</section>
<style>
  .gg { padding: 5rem 2rem; background: #fff; }
  .gg-inner { max-width: 1280px; margin: 0 auto; }
  .gg-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
  .gg-headline { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.75rem; }
  .gg-sub { font-size: 1.0625rem; color: #6b7280; line-height: 1.6; margin: 0; }
  .gg-grid { display: grid; }
  .gg--cols-2 .gg-grid { grid-template-columns: repeat(2, 1fr); }
  .gg--cols-3 .gg-grid { grid-template-columns: repeat(3, 1fr); }
  .gg--cols-4 .gg-grid { grid-template-columns: repeat(4, 1fr); }
  .gg--gap-sm .gg-grid { gap: 0.5rem; }
  .gg--gap-md .gg-grid { gap: 1rem; }
  .gg--gap-lg .gg-grid { gap: 1.5rem; }
  .gg-figure { margin: 0; overflow: hidden; border-radius: 0.5rem; position: relative; }
  .gg-img { width: 100%; height: 280px; object-fit: cover; display: block; transition: transform 0.4s ease; }
  .gg-figure:hover .gg-img { transform: scale(1.04); }
  .gg-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.6)); color: #fff; padding: 1.5rem 0.875rem 0.75rem; font-size: 0.8125rem; }
  @media (max-width: 768px) { .gg--cols-3 .gg-grid, .gg--cols-4 .gg-grid { grid-template-columns: repeat(2,1fr); } }
  @media (max-width: 480px) { .gg-grid { grid-template-columns: 1fr !important; } }
</style>