<div className="w-screen h-screen bg-gradient-to-r from-blue-600 to-purple-600">
  <div className="flex items-center justify-center h-full px-4">
    <div className="text-center text-white">
      <AnchorHeading as="h1" className="text-6xl font-bold mb-4">Full Viewport</AnchorHeading>
      <p className="text-xl">Edge-to-edge immersive experience</p>
    </div>
  </div>
</div>

<div className="max-w-4xl mx-auto px-4">
  <AnchorHeading as="h2">Regular Content</AnchorHeading>
  <p>This content is contained...</p>
</div>

<!-- Full-width breakout section -->
<div className="w-full bg-muted py-16 -mx-[50vw] ml-[50%]">
  <div className="max-w-6xl mx-auto px-4">
    <AnchorHeading as="h2">Full Width Section</AnchorHeading>
    <p>This section spans the full viewport width</p>
  </div>
</div>

<div className="max-w-4xl mx-auto px-4">
  <p>Back to contained content...</p>
</div>

<div className="grid grid-cols-[1fr_min(65ch,100%)_1fr] gap-4">
  <!-- Content spans all columns for full-width -->
  <div className="col-span-full bg-blue-500 text-white p-8">
    <AnchorHeading as="h1">Full Width Header</AnchorHeading>
  </div>
  
  <!-- Content constrained to middle column -->
  <div className="col-start-2">
    <p>Regular content with max-width...</p>
  </div>
  
  <!-- Another full-width section -->
  <div className="col-span-full bg-muted p-8">
    <div className="max-w-4xl mx-auto">
      <AnchorHeading as="h2">Full Width with Centered Content</AnchorHeading>
    </div>
  </div>
</div>