---
interface Props {
    title: string;
    subtitle?: string;
    centered?: boolean;
    class?: string;
}

const { title, subtitle, centered = false, class: className = "" } = Astro.props;
---

<div class:list={[centered && "text-center", "mb-12 md:mb-16", className]}>
    <h2 class="text-3xl md:text-5xl font-serif font-medium tracking-tight text-brand-dark mb-4">
        <Fragment set:html={title} />
    </h2>
    {subtitle && (
        <p class="text-lg text-stone-500 leading-relaxed max-w-2xl" class:list={[centered && "mx-auto"]}>
            {subtitle}
        </p>
    )}
</div>