Container

The page measure — caps content width and centers it, with a narrow variant for reading-length pages.

Content on the standard measure (--cc-container, 72rem).

Narrow variant (60rem) for document-style interior pages.

Show the markup

<div class="cc-container" style="outline: 1px dashed var(--cc-line);">
  <p class="cc-paragraph">Content on the standard measure (<code>--cc-container</code>, 72rem).</p>
</div>
<div class="cc-container cc-container--narrow" style="outline: 1px dashed var(--cc-line);">
  <p class="cc-paragraph">Narrow variant (60rem) for document-style interior pages.</p>
</div>

Usage

Wrap main content in cc-container; use cc-container--narrow when the page is mostly prose.
Full-bleed bands (site header, info strip, page head, footer, hero band) do not take an inner container — their layout lives on the band element, so they cap content with contained padding instead. Use their contained variants.
Override --cc-container to retheme the measure site-wide.