# Container

The site has **one** content container. All sections, imported blocks, and future features must use it.

## API

```tsx
import { Container } from "@/components/container";
import { layout, containerClassName } from "@/lib/layout";
```

| Export | What it does |
| --- | --- |
| `<Container>` | Renders `div` with `layout.container` |
| `layout.container` | Class string for rare cases without the component |
| `containerClassName(extra?)` | Merges extras via `cn` |

## Spec

| Property | Value |
| --- | --- |
| Display | Block, full width of parent |
| Max width | `76.8rem` (1228.8px) — 20% wider than former `max-w-5xl` |
| Horizontal padding | `1.5rem` (`px-6`) at all breakpoints |
| Centering | `mx-auto` |
| Vertical padding | **None** — vertical rhythm belongs on the `<section>` |

## Full-bleed vs constrained

```tsx
{/* Background spans viewport; content stays aligned */}
<section className={cn("section-shell bg-gradient-cta", layout.sectionY)}>
  <Container className="section-content">
    …
  </Container>
</section>
```

Rules:

- Backgrounds, borders, and decorative washes may be full viewport width.
- Text, forms, card grids, and CTAs stay inside `<Container>`.
- Edge-to-edge imagery (hero photos, marquees) may break out **only** when the design intentionally requires it; any overlaid copy still uses `Container`.

## Replacing imported containers

When adapting Shadcn / Tailark / marketing blocks:

1. Delete their `container`, `mx-auto max-w-*`, and conflicting `px-*`.
2. Wrap content with `<Container>` (or apply `layout.container`).
3. Move vertical padding to `layout.sectionY` on the outer `<section>`.
4. Keep inner `max-w-*` only on prose columns.

## Do not

- Create `ContainerSm`, `ContainerWide`, or page-specific max-widths.
- Use `px-4` / `px-8` as section gutters (always `px-6` via the shared token).
- Apply `layout.container` twice (nested containers).

## Related

- [layout.md](./layout.md)
- [shadcn.md](./shadcn.md)
- Cursor rule: `.cursor/rules/layout-container.mdc`