---
/**
 * Break something out of the reading column.
 *
 *   <Bleed width="wide">…</Bleed>   → 52rem track
 *   <Bleed width="full">…</Bleed>   → edge to edge
 *
 * Figures and photo grids already take a `width` prop and do not need this.
 * Bleed is for arbitrary content — a diagram, a custom island, a table you
 * want room for.
 */
interface Props {
	width?: 'wide' | 'full';
}

const { width = 'wide' } = Astro.props;
---

<div class:list={[width === 'wide' ? 'u-wide' : 'u-full', 'bleed']}>
	<slot />
</div>

<style>
	.bleed {
		margin-block: var(--space-l);
	}
</style>