Caster — Container

Default

Caps width at 1440px, centers, applies side gutter. Resize the window to see the gutter shift between 16px / 32px / 80px.

.container — content area

<div class="container">
  <!-- Page content here -->
</div>

Behavior at each breakpoint

The container's max-width stays constant; only the side gutter changes.

Breakpoint	Min width	Side gutter	Container max
Small · mobile	0–767px	16px (spacing.4)	1440px
Medium · tablet	768–1199px	32px (spacing.8)	1440px
Large · desktop	1200px+	80px (spacing.20)	1440px

When NOT to use container

Three components intentionally bypass the container — they handle their own padding so they can span the full viewport edge-to-edge.

Component	Why
Announcement bar	Visual unity at the top of the viewport. Bar bleeds to edges; content within consumes the same gutter as `.container`.
Site header	Same reason. Logo + search + actions sit at viewport edges.
Footer	Deep-navy bg fills the viewport at the bottom of every page.

Pattern: these three components apply the container's gutter values internally via the same --caster-layout-container-pad-* tokens. So when the gutter changes globally, they shift in lockstep.

What goes inside

Most pages: hero, breadcrumb, page sections, related-products grid all wrap in their own .container. The PDP layout sits inside one container; the related-products row sits inside another below it.

<body>
  <div class="announcement-bar">...</div>     <!-- full width -->
  <header class="site-header">...</header>     <!-- full width -->
  <nav class="primary-nav">...</nav>            <!-- full width -->

  <main>
    <div class="container">
      <nav class="breadcrumb">...</nav>
      <section>...</section>
      <section>...</section>
    </div>
  </main>

  <footer class="site-footer">...</footer>     <!-- full width -->
</body>

Tokens consumed

Slot	Token
Max width	--caster-size-container-max (1440px)
Gutter — small	--caster-layout-container-pad-small (16px)
Gutter — medium	--caster-layout-container-pad-medium (32px)
Gutter — large	--caster-layout-container-pad-large (80px)