---
// CP-DATA-003 service_card
interface Props {
  title: string;
  description?: string;
}
const { title, description } = Astro.props;
---
<article class="service-card">
  <h3 class="service-card__title">{title}</h3>
  {description && <p class="service-card__desc">{description}</p>}
</article>

<style>
  .service-card {
    background: #fff;
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: var(--radius, 8px);
    padding: 1.5rem;
    height: 100%;
  }
  .service-card__title {
    font-family: var(--font-heading, Georgia, serif);
    font-size: 1.2rem;
    margin: 0 0 0.5rem;
  }
  .service-card__desc {
    margin: 0;
    color: var(--color-text-muted, #5a5a5a);
    line-height: 1.5;
  }
</style>