---
import { cn } from '@/utils'

const { class: className, title, subtitle } = Astro.props
---

<section class={cn(className, 'flex flex-col gap-y-5 md:flex-row md:gap-y-0')}>
	<div class='md:w-1/3'>
		<h2 class='font-semibol text-xl'>{title}</h2>
		<h3 class='text-muted-foreground'>{subtitle}</h3>
	</div>
	<div class='flex flex-col gap-y-3 md:w-2/3'>
		<slot />
	</div>
</section>