Container

---
/**
 * In-flow max-width column (Bootstrap-style `.container`): stays within the
 * parent, `w-full` up to a cap, centered with `mx-auto`. Widths match
 * `Base.astro` main shell (`max-w-2xl` / `max-w-3xl` / fluid + gutters).
 */
interface Props {
  width?: 'default' | 'wide' | 'full'
  class?: string
}

const { width = 'default', class: className } = Astro.props

const layoutClass = {
  default: 'mx-auto box-border w-full max-w-2xl px-6',
  wide: 'mx-auto box-border w-full max-w-4xl px-6',
  full: 'mx-auto box-border w-full max-w-none px-4 sm:px-6 lg:px-8',
}[width]
---

<div class:list={[layoutClass, className]}>
  <slot />
</div>