---
const { frontmatter } = Astro.props;
import BaseLayout from './BaseLayout.astro';
---

<BaseLayout pageTitle={frontmatter.title} >
<h1>{frontmatter.title}</h1>
<div class="flx(wrap) middle space-between">
	<p style="font-size: 2rem;"> <em>{frontmatter.description}</em></p>
</div>
<div class="flx(wrap) middle right" >
<p class="mr-2">Written by: {frontmatter.author},</p>

	<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
</div>


<div class="flx(wrap) center middle is-full mb-4" style="flex-shrink: 1;">
	<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
</div>




<slot />

</BaseLayout>