---
export interface Props {
	heading: string;
	description?: string | undefined;
}

const { heading, description } = Astro.props as Props;
---

<div class="page-heading">
	<h1>
		{heading}
	</h1>
	{description && <p>{description}</p>}
</div>

<style lang="scss">
	div {
		margin-bottom: 2.5rem;
		& h1 {
			font-size: var(--font-size-4xl);
			text-align: center;
			margin-bottom: 15px;
		}
		& p {
			font-size: var(--font-size-lg);
			text-align: center;
			max-width: 650px;
			margin: 0 auto;
		}
	}
</style>