ListDivided list

---
interface Props {
  items: Array<{ left: string; right: string }>;
}
const { items = [
  { left: "Kanaal", right: "Google Search Ads" },
  { left: "Budget", right: "€2.500 / maand" },
  { left: "ROAS", right: "4,2×" },
  { left: "Looptijd", right: "6 maanden" },
  { left: "Resultaat", right: "+180% omzet" },
] } = Astro.props;
---

<dl class="lst-div">
  {items.map(item => (
    <div class="lst-div__row">
      <dt class="lst-div__left">{item.left}</dt>
      <dd class="lst-div__right">{item.right}</dd>
    </div>
  ))}
</dl>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-div {
    margin: 0;
    padding: 0;
  }
  .lst-div__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
  }
  .lst-div__row:last-child { border-bottom: none; }
  .lst-div__left {
    font-size: 0.875rem;
    color: #888;
    font-weight: 500;
  }
  .lst-div__right {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
  }
</style>