---
import GridLayout from './GridLayout.astro';
import PageTitle from '../components/PageTitle.astro';
import Picture from '../components/Picture.astro';

const { frontmatter } = Astro.props;
---

<GridLayout title={frontmatter.title} grid="narrow" {...frontmatter}>
	<PageTitle slot="title" grid="narrow" {...frontmatter}>
		{frontmatter.title}
	</PageTitle>
	<div
		slot="before-content"
		class="col-start-1 col-end-12 md:col-start-3 md:col-end-10 xl:col-start-15 xl:col-end-18 xl:row-start-2 xl:-scale-x-100 3xl:col-start-14 3xl:col-end-17"
	>
		<Picture
			alt="Stefan Imhoff"
			aspect={1}
			breakpoints={[300, 512]}
			src="/assets/images/ai-portrait-stefan-imhoff.png"
		/>
	</div>
	<slot />
</GridLayout>
