ListMinimal list

---
/**
 * ListMinimal
 * Strakke lijst van items gescheiden door dunne lijnen. Hover toont een pijl-indicator.
 *
 * Props:
 * - items?: string[]
 */
interface Props {
  items?: string[];
}

const {
  items = [
    'Strategie & consultancy',
    'SEO & content marketing',
    'Google & Meta Ads',
    'Webdesign & development',
    'E-mail & marketing automation',
  ],
} = Astro.props;
---

<section class="bl-section lst-min-section">
  <div class="bl-inner bl-inner--narrow">
    <ul class="lst-min">
      {items.map(item => (
        <li class="lst-min__item">{item}</li>
      ))}
    </ul>
  </div>
</section>

<style>
.lst-min{list-style:none;margin:0;padding:0}
.lst-min__item{font-size:1rem;color:var(--color-primary, #0a0a0a);padding:.65rem 0;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
.lst-min__item:last-child{border-bottom:none}
.lst-min__item:after{content:"→";color:var(--color-accent, #6366f1);font-size:.9rem;opacity:0;transition:opacity .2s}
.lst-min__item:hover:after{opacity:1}
</style>