---
type Props = {
	title: string;
	subtitle?: string;
	id?: string;
	level?: 'h1' | 'h2' | 'h3';
	class?: string;
};

const { title, subtitle, id, level: Heading = 'h2', class: className } = Astro.props;
---

<div class:list={['flex flex-col gap-5', className]}>
	<Heading id={id} class="text-heading-sm font-semibold text-balance lg:text-heading">{title}</Heading>
	{subtitle && <p class="text-xl font-light text-muted">{subtitle}</p>}
	<slot />
</div>