ListCards list

---
interface Props {
  items: Array<{ title: string; desc: string; tag?: string }>;
}
const { items = [
  { title: "SEO & Content", desc: "Duurzame zichtbaarheid via organische zoekresultaten.", tag: "Organisch" },
  { title: "Google Ads", desc: "Directe leads via betaalde zoekcampagnes.", tag: "Paid" },
  { title: "Social Media", desc: "Merk bouwen en community activeren.", tag: "Social" },
  { title: "E-mail Marketing", desc: "Klanten behouden via geautomatiseerde flows.", tag: "Retention" },
] } = Astro.props;
---

<ul class="lst-cards">
  {items.map(item => (
    <li class="lst-cards__card">
      {item.tag && <span class="lst-cards__tag">{item.tag}</span>}
      <strong class="lst-cards__title">{item.title}</strong>
      <p class="lst-cards__desc">{item.desc}</p>
    </li>
  ))}
</ul>

<style>
  :root {
    --color-accent: #6366f1;
    --color-primary: #0a0a0a;
  }
  .lst-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
  .lst-cards__card {
    border: 1.5px solid #e5e5e5;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .lst-cards__card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(99,102,241,0.1);
  }
  .lst-cards__tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-accent);
  }
  .lst-cards__title {
    font-size: 0.975rem;
    font-weight: 700;
    color: var(--color-primary);
  }
  .lst-cards__desc {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
  }
</style>