---
interface Props { eyebrow: string; title: string; description?: string; align?: "left" | "center"; light?: boolean; }
const { eyebrow, title, description, align = "left", light = false } = Astro.props;
---
<div class:list={["section-heading", `section-heading--${align}`, { "section-heading--light": light }]} data-reveal>
  <div class="eyebrow"><span></span>{eyebrow}</div><h2>{title}</h2>{description && <p>{description}</p>}
</div>
