ImageGrid2x2 image

---
interface GridImage {
  src?: string;
  alt: string;
  caption?: string;
}

interface Props {
  images?: GridImage[];
  title?: string;
}

const {
  images = [
    { alt: 'Project Alpha', caption: 'Branding & Identiteit' },
    { alt: 'Project Beta', caption: 'Web Development' },
    { alt: 'Project Gamma', caption: 'Performance Ads' },
    { alt: 'Project Delta', caption: 'Social Media' },
  ],
  title = 'Ons werk',
} = Astro.props;
---

<section class="ig22">
  {title && <h2 class="ig22__title">{title}</h2>}
  <div class="ig22__grid">
    {images.slice(0, 4).map((img) => (
      <div class="ig22__item">
        {img.src ? (
          <img class="ig22__img" src={img.src} alt={img.alt} />
        ) : (
          <div class="ig22__placeholder" aria-label={img.alt}></div>
        )}
        {img.caption && <span class="ig22__caption">{img.caption}</span>}
      </div>
    ))}
  </div>
</section>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .ig22 { padding: 3rem 0; }
  .ig22__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary, #0a0a0a);
    margin: 0 0 2rem;
    text-align: center;
  }
  .ig22__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .ig22__item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4/3;
  }
  .ig22__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  .ig22__item:hover .ig22__img { transform: scale(1.04); }
  .ig22__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e0e0f0 0%, #c8c8e8 100%);
  }
  .ig22__caption {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    background: rgba(10,10,10,0.7);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
  }
  @media (max-width: 640px) {
    .ig22__grid { grid-template-columns: 1fr; }
  }
</style>