ListGrid list

---
/**
 * ListGrid
 * Twee-koloms rasterlijst met dot per item. Compact service- of feature-overzicht.
 *
 * Props:
 * - items?: string[]
 */
interface Props {
  items?: string[];
}

const {
  items = [
    'Google Ads',
    'Meta Ads',
    'SEO',
    'Content marketing',
    'E-mail flows',
    'Analytics',
    'Webdesign',
    'CRO',
    'LinkedIn Ads',
    'Video marketing',
  ],
} = Astro.props;
---

<section class="bl-section lst-grid-section">
  <div class="bl-inner">
    <ul class="lst-grid">
      {items.map(item => (
        <li class="lst-grid__item">
          <span class="lst-grid__dot"></span>
          <span>{item}</span>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0}
.lst-grid__item{display:flex;align-items:center;gap:.6rem;padding:.65rem 0;border-bottom:1px solid #f0f0f0;font-size:.95rem;color:var(--color-primary, #0a0a0a)}
.lst-grid__item:nth-child(odd){padding-right:1.5rem}
.lst-grid__dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent, #6366f1);flex-shrink:0}
</style>