diff --git a/.changeset/kind-books-heal.md b/.changeset/kind-books-heal.md
new file mode 100644
index 0000000000..2ad2491890
--- /dev/null
+++ b/.changeset/kind-books-heal.md
@@ -0,0 +1,16 @@
+---
+"@marigold/docs": major
+"@marigold/components": major
+---
+
+refa: improve `<Container>` and `<Breakout>`  component
+
+**BREAKING CHANGE:** This PR includes breaking changes, because we removed and changed a lot ot the props API of `<Container>` and `<Breakout>`. The `<Container>` now only works with `<Text>` and `<Headline>` component. This allows for a smoother developer experience and prevents suprises.
+
+Make the `<Container>` and `<Breakout>` component more usable for real world scenarios.
+
+- `<Container>` supporst `space` style prop
+- simplify `<Container>` usage by removing unnecessary props
+- simplify ´<Breakout>` and make it composable with other layout components
+- make `<Text>` and `<Headline>` adhere to a `<Container>` content length
+
diff --git a/docs/content/components/form/slider/slider-form.demo.tsx b/docs/content/components/form/slider/slider-form.demo.tsx
index f6e32fc70e..c4343af5a0 100644
--- a/docs/content/components/form/slider/slider-form.demo.tsx
+++ b/docs/content/components/form/slider/slider-form.demo.tsx
@@ -1,10 +1,9 @@
 import { FormEvent } from 'react';
 import {
   Button,
-  Container,
+  Center,
   FieldBase,
   FieldGroup,
-  Inline,
   Slider,
   Stack,
 } from '@marigold/components';
@@ -20,26 +19,26 @@ export default () => {
   };
 
   return (
-    <Container size={'large'}>
+    <Center>
       <Form onSubmit={handleSubmit}>
-        <FieldGroup labelWidth={'100px'}>
-          <Stack space={2}>
-            <FieldBase label="Age">
-              <Slider
-                defaultValue={[20, 30]}
-                maxValue={100}
-                thumbLabels={['start', 'end']}
-                width={60}
-              />
-            </FieldBase>
-          </Stack>
-        </FieldGroup>
-        <Inline space={4} alignX={'right'}>
+        <Stack alignX="right" space={4}>
+          <FieldGroup labelWidth={'100px'}>
+            <Stack space={2}>
+              <FieldBase label="Age">
+                <Slider
+                  defaultValue={[20, 30]}
+                  maxValue={100}
+                  thumbLabels={['start', 'end']}
+                  width={60}
+                />
+              </FieldBase>
+            </Stack>
+          </FieldGroup>
           <Button variant="primary" type="submit">
             Submit
           </Button>
-        </Inline>
+        </Stack>
       </Form>
-    </Container>
+    </Center>
   );
 };
diff --git a/docs/content/components/form/switch/switch-appearance.demo.tsx b/docs/content/components/form/switch/switch-appearance.demo.tsx
index 5af60bb731..809470a335 100644
--- a/docs/content/components/form/switch/switch-appearance.demo.tsx
+++ b/docs/content/components/form/switch/switch-appearance.demo.tsx
@@ -1,7 +1,5 @@
-import { Container, Switch, SwitchProps } from '@marigold/components';
+import { Switch, SwitchProps } from '@marigold/components';
 
 export default (props: SwitchProps) => (
-  <Container size={'small'}>
-    <Switch {...props}>Default Switch</Switch>
-  </Container>
+  <Switch {...props}>Default Switch</Switch>
 );
diff --git a/docs/content/components/form/switch/switch-basic.demo.tsx b/docs/content/components/form/switch/switch-basic.demo.tsx
deleted file mode 100644
index 15fc1d4b60..0000000000
--- a/docs/content/components/form/switch/switch-basic.demo.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Container, Switch } from '@marigold/components';
-
-export default () => (
-  <Container>
-    <Switch>Default Switch</Switch>
-  </Container>
-);
diff --git a/docs/content/components/layout/breakout/breakout-appearance.demo.tsx b/docs/content/components/layout/breakout/breakout-appearance.demo.tsx
new file mode 100644
index 0000000000..7abf096fb5
--- /dev/null
+++ b/docs/content/components/layout/breakout/breakout-appearance.demo.tsx
@@ -0,0 +1,32 @@
+import {
+  Aspect,
+  Breakout,
+  Container,
+  Headline,
+  Image,
+  Text,
+} from '@marigold/components';
+
+export default () => (
+  <Container align="center" alignItems="center" space={4}>
+    <Headline level="3">
+      Welcome to The Giggle Grounds - Laughville's New Comedy Hub!
+    </Headline>
+    <Breakout>
+      <Aspect ratio="ultrawide">
+        <Image src="/venues/comedy-show.webp" alt="" />
+      </Aspect>
+    </Breakout>
+    <Text>
+      Laughville, get ready to laugh! Introducing The Giggle Grounds, an outdoor
+      amphitheater for comedy under the stars. Located at 123 Main Street, this
+      venue blends natural charm with live entertainment for a perfect night
+      out. With a capacity of 500, The Giggle Grounds offers an intimate yet
+      lively experience, ideal for enjoying top comedians in an open-air
+      setting. Pricing ranges from $1000 to $5000, making it flexible for
+      various events and budgets. Join us at The Giggle Grounds for an
+      unforgettable comedy experience! For bookings or more information, visit
+      us at 123 Main Street, Laughville.
+    </Text>
+  </Container>
+);
diff --git a/docs/content/components/layout/breakout/breakout-complex.demo.tsx b/docs/content/components/layout/breakout/breakout-complex.demo.tsx
new file mode 100644
index 0000000000..3980c119d6
--- /dev/null
+++ b/docs/content/components/layout/breakout/breakout-complex.demo.tsx
@@ -0,0 +1,44 @@
+import {
+  Aspect,
+  Breakout,
+  Container,
+  Headline,
+  Image,
+  Inline,
+  Text,
+} from '@marigold/components';
+
+export default () => (
+  <Container space={6} align="center">
+    <Headline level="2">Upcoming Shows at The Guffaw Gardens</Headline>
+    <Breakout>
+      <Inline space={4} alignY="center" alignX="center">
+        <Aspect maxWidth="200px">
+          <Image src="/venues/petal-punchlines.webp" alt="" />
+        </Aspect>
+        <Aspect maxWidth="200px">
+          <Image src="/venues/chuckles-and-chill.webp" alt="" />
+        </Aspect>
+        <Aspect maxWidth="200px">
+          <Image src="/venues/botanical-banter.webp" alt="" />
+        </Aspect>
+      </Inline>
+    </Breakout>
+    <Text>
+      Get ready for a season of laughter at The Guffaw Gardens! This spring,
+      don't miss the Laugh Bloom Festival, featuring some of the best names in
+      comedy.
+    </Text>
+    <Text>
+      On May 5th, The Petal Punchlines will be hosted by comedian Rosie Petals,
+      known for her sharp wit. On May 12th, Chuckles & Chill will bring a
+      relaxed evening of comedy with Ivy Green and Marv "The Bloom" Thompson.
+      Finish the month with Botanical Banter on May 26th, headlined by Daisy
+      Bloom and Fern Tickles, promising a night full of laughs.
+    </Text>
+    <Text>
+      Whether with friends or for a special night out, The Guffaw Gardens is the
+      place to be for comedy and nature this season.
+    </Text>
+  </Container>
+);
diff --git a/docs/content/components/layout/breakout/breakout.mdx b/docs/content/components/layout/breakout/breakout.mdx
index 63d7ab55af..1c0c80a3ab 100644
--- a/docs/content/components/layout/breakout/breakout.mdx
+++ b/docs/content/components/layout/breakout/breakout.mdx
@@ -1,40 +1,57 @@
 ---
 title: Breakout
-caption: Component that breaks out of a grid layout context.
+caption: When you need to break out of a grid layout.
+badge: updated
 ---
 
-`<Breakout>` is a layout component which lets you span the full row in a CSS grid context e.g. our [`<Container>`](container/) component.
+The `<Breakout>` component is designed to help elements break out of their current container layout, creating visual interest and giving content the space it needs to stand out. Combine `<Breakout>` with the `<Container>` component to maintain a cohesive design while effectively drawing attention to important elements.
 
-You need this component if you want to display something out of the context. It is also possible to put several components into the `<Breakout>`.
+## Usage
 
-You can use `alignX` or `alignY` to place the items inside the `<Breakout>` element.
+Use the `<Breakout>` component when you need elements to break out of their current container layout, adding visual interest and giving content the space it needs to stand out.
 
-## Import
+It is particularly useful for situations where extra emphasis is needed or when you want to create a more dynamic and engaging reading experience. `<Breakout>` is ideal for highlighting media elements or other key content.
 
-```tsx
-import { Breakout } from '@marigold/components';
-```
+<ComponentDemo file="./breakout-appearance.demo.tsx" />
 
-## Props
-
-<PropsTable component={title} />
-
-## Examples
+### Complex layouts
 
-### Vertical alignment
+You can create more complex layouts within the `<Breakout>` component by combining it with other layout components. By nesting `<Inline>`, `<Stack>`, or `<Columns>` inside `<Breakout>`, you can design advanced, responsive structures that go beyond simple content.
 
-In this case the `height` prop is necessary, if you haven't set it, the `alignY` has no impact.
+Note that the `<Text>` component will still adhere to the content length defined by the `<Container>`.
 
-<ComponentDemo file="./vertical-breakout.demo.tsx" />
+<ComponentDemo file="./breakout-complex.demo.tsx" />
 
-### Horizontal alignment
-
-Example to show how the `alignX` prop is to set. Options are `"left" | "center" | "right"`. The default value is `left`.
-
-<ComponentDemo file="./horizontal-breakout.demo.tsx" />
+## Props
 
-### Breakout iframe
+<StorybookHintMessage component={title} />
 
-This example shows how to use an `<iframe>` within a `<Breakout>`.
+<PropsTable component={title} />
 
-<ComponentDemo file="./iframe-breakout.demo.tsx" />
+## Related
+
+<TeaserList
+  items={[
+    {
+      title: 'Building layouts',
+      href: '../../foundations/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>
diff --git a/docs/content/components/layout/breakout/horizontal-breakout.demo.tsx b/docs/content/components/layout/breakout/horizontal-breakout.demo.tsx
deleted file mode 100644
index 87afa3076a..0000000000
--- a/docs/content/components/layout/breakout/horizontal-breakout.demo.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Breakout, Container } from '@marigold/components';
-
-export default () => (
-  <Container align="center">
-    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
-    <Breakout alignX="right">
-      <div>BREAKOUT with right aligned content</div>
-    </Breakout>
-    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
-  </Container>
-);
diff --git a/docs/content/components/layout/breakout/iframe-breakout.demo.tsx b/docs/content/components/layout/breakout/iframe-breakout.demo.tsx
deleted file mode 100644
index 1d536d2121..0000000000
--- a/docs/content/components/layout/breakout/iframe-breakout.demo.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Aspect, Breakout, Container } from '@marigold/components';
-
-export default () => (
-  <Container align="center">
-    <p className="p-1">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-      Lorem Ipsum has been the industry's standard dummy text ever since the
-      1500s, when an unknown printer took a galley of type and scrambled it to
-      make a type specimen book.
-    </p>
-    <Breakout alignX="center" alignY="center">
-      <Aspect ratio="ultrawide">
-        <iframe
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4820.000043444012!2d7.826018541821473!3d48.020383262446884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47911b1e29425703%3A0xbe342117a976e59!2sEuropa-Park%20Stadion!5e1!3m2!1sde!2sde!4v1647595604899!5m2!1sde!2sde"
-          title="sc_map"
-          width="100%"
-          height="100%"
-        />
-      </Aspect>
-    </Breakout>
-    <p className="p-2">
-      It has survived not only five centuries, but also the leap into electronic
-      typesetting, remaining essentially unchanged. It was popularised in the
-      1960s with the release of Letraset sheets containing Lorem Ipsum passages,
-      and more recently with desktop publishing software like Aldus PageMaker
-      including versions of Lorem Ipsum.
-    </p>
-  </Container>
-);
diff --git a/docs/content/components/layout/breakout/vertical-breakout.demo.tsx b/docs/content/components/layout/breakout/vertical-breakout.demo.tsx
deleted file mode 100644
index 3a80822f51..0000000000
--- a/docs/content/components/layout/breakout/vertical-breakout.demo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Breakout, Container } from '@marigold/components';
-
-export default () => (
-  <Container align="center">
-    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
-    <Breakout height="100px" alignY="bottom">
-      <div className="border border-slate-300 bg-slate-200">
-        BREAKOUT with bottom alignment
-      </div>
-    </Breakout>
-    <div className="h-20 w-full border border-slate-300 bg-slate-200" />
-  </Container>
-);
diff --git a/docs/content/components/layout/container/container-alignment.demo.tsx b/docs/content/components/layout/container/container-alignment.demo.tsx
new file mode 100644
index 0000000000..7703b785c4
--- /dev/null
+++ b/docs/content/components/layout/container/container-alignment.demo.tsx
@@ -0,0 +1,36 @@
+import { Aspect, Container, Headline, Image, Text } from '@marigold/components';
+
+export default () => (
+  <Container space={4} contentLength="short" align="center" alignItems="center">
+    <Headline level="3">Taking care of Marigolds</Headline>
+    <Aspect maxWidth="250px" ratio="ultrawide">
+      <Image
+        src="/marigold-watering.webp"
+        alt="Watering a marigold flower"
+        fit="cover"
+      />
+    </Aspect>
+    <Text>
+      Caring for marigold flowers is straightforward, making them a popular
+      choice for many gardeners. Marigolds thrive best in full sunlight, so make
+      sure to plant them in a spot that receives at least six hours of direct
+      sunlight every day. They grow well in a variety of soils but prefer
+      well-drained, moderately fertile soil. Be sure to space them adequately,
+      as proper air circulation helps prevent disease.
+    </Text>
+    <Text>
+      Watering marigolds requires balance. They do best when their soil is kept
+      slightly moist but not overly wet. Water the plants deeply when the top
+      inch of soil feels dry, but avoid watering directly onto the flowers and
+      leaves to prevent mold and mildew. Mulching around the base can help
+      retain moisture and minimize weeds.
+    </Text>
+    <Text>
+      Deadheading, or removing spent flowers, will encourage marigolds to bloom
+      more vigorously. This not only keeps the plants looking tidy but also
+      redirects energy into producing new blooms. With proper sunlight,
+      watering, and a bit of pruning, marigold flowers can bring vibrant color
+      to your garden all season long.
+    </Text>
+  </Container>
+);
diff --git a/docs/content/components/layout/container/container-appearance.demo.tsx b/docs/content/components/layout/container/container-appearance.demo.tsx
new file mode 100644
index 0000000000..97c7a27f78
--- /dev/null
+++ b/docs/content/components/layout/container/container-appearance.demo.tsx
@@ -0,0 +1,18 @@
+import { Container, Headline, Text } from '@marigold/components';
+
+export default () => (
+  <Container>
+    <Headline level="3">The marigold flower</Headline>
+    <Text>
+      The marigold flower, known for its bright orange and yellow hues, is more
+      than just a vibrant addition to gardens. Marigolds have been used for
+      centuries in traditional medicine for their anti-inflammatory properties.
+      In many cultures, they symbolize positive emotions like warmth and
+      creativity, and are often used in festivals and celebrations. The marigold
+      is also known for its ability to deter garden pests, making it a favorite
+      companion plant for vegetables. Beyond their beauty, these flowers play a
+      role in pollinator gardens, attracting bees and butterflies to enhance
+      biodiversity.
+    </Text>
+  </Container>
+);
diff --git a/docs/content/components/layout/container/container-complex.demo.tsx b/docs/content/components/layout/container/container-complex.demo.tsx
new file mode 100644
index 0000000000..60c3597868
--- /dev/null
+++ b/docs/content/components/layout/container/container-complex.demo.tsx
@@ -0,0 +1,34 @@
+import { Columns, Container, Headline, Text } from '@marigold/components';
+
+export default () => (
+  <Container space={6} align="center" alignItems="center">
+    <Headline level="3">Sunny the marigold</Headline>
+    <Columns columns={[1, 1]} space={8}>
+      <Text>
+        In a cozy garden behind an old cottage, a marigold named Sunny grew
+        among daisies and tulips. Her petals were vibrant, glowing in deep
+        shades of orange and yellow. She loved feeling the warmth of the sun as
+        it touched her petals, and she enjoyed the company of her fellow
+        flowers. Butterflies would often visit her, and she would sway gently in
+        the breeze, feeling a sense of peace. Despite all of this, Sunny
+        sometimes felt small compared to the tall sunflowers nearby. They seemed
+        grand, while she was just a splash of color in the corner.
+      </Text>
+      <Text>
+        One morning, a little girl named Emma, who lived in the cottage,
+        wandered into the garden feeling sad. Her best friend had moved away,
+        and she needed comfort. When she saw Sunny's glowing petals, Emma smiled
+        for the first time in days. She knelt beside Sunny, touched her petals,
+        and whispered, "You're beautiful." Emma made a small bouquet with Sunny
+        at the center, finding a bit of joy even in her sadness.
+      </Text>
+    </Columns>
+    <Text>
+      After that day, Sunny understood her purpose. It wasn't about being the
+      biggest flower, but about bringing light to others. She had made Emma
+      smile, and that was more important than anything else. Sunny stood tall,
+      proud of her role in the garden—a reminder that even the smallest flowers
+      can have the biggest impact.
+    </Text>
+  </Container>
+);
diff --git a/docs/content/components/layout/container/container-content-length.demo.tsx b/docs/content/components/layout/container/container-content-length.demo.tsx
new file mode 100644
index 0000000000..26d740aa24
--- /dev/null
+++ b/docs/content/components/layout/container/container-content-length.demo.tsx
@@ -0,0 +1,11 @@
+import { Container, Text } from '@marigold/components';
+
+export default () => (
+  <Container contentLength="short" space={2}>
+    <Text fontSize="2xl">
+      "Marigolds are perfect for my garden! They’re easy to care for, bright,
+      and keep pests away."
+    </Text>
+    <Text fontStyle="italic">- Jane S., Home Gardener</Text>
+  </Container>
+);
diff --git a/docs/content/components/layout/container/container-dynamic-width.demo.tsx b/docs/content/components/layout/container/container-dynamic-width.demo.tsx
new file mode 100644
index 0000000000..7b037b0d54
--- /dev/null
+++ b/docs/content/components/layout/container/container-dynamic-width.demo.tsx
@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { Container, Headline, Select, Stack, Text } from '@marigold/components';
+
+type FontSizes = 'sm' | 'base' | 'lg';
+
+export default () => {
+  const [fontSize, setFontSize] = useState<FontSizes>('base');
+
+  return (
+    <Stack space={8}>
+      <Select
+        label="Font size"
+        selectedKey={fontSize}
+        onChange={(val: FontSizes) => setFontSize(val)}
+        width={52}
+      >
+        <Select.Option id="sm">Small</Select.Option>
+        <Select.Option id="base">Default</Select.Option>
+        <Select.Option id="lg">Large</Select.Option>
+      </Select>
+
+      <Container space={4}>
+        <Headline level="3">The Marigold</Headline>
+        <Text fontSize={fontSize}>
+          Golden petals catch the sun,Blooming bright till day is done.In the
+          garden, standing bold,A gentle spark, the marigold.
+        </Text>
+        <Text fontSize={fontSize}>
+          Dew drops fall and sparkle clear,Nature's beauty, always near.Orange
+          flames in sunlight hold,Cheerful blooms, the marigold.
+        </Text>
+      </Container>
+    </Stack>
+  );
+};
diff --git a/docs/content/components/layout/container/container.mdx b/docs/content/components/layout/container/container.mdx
index babfba41a2..d79e8532ce 100644
--- a/docs/content/components/layout/container/container.mdx
+++ b/docs/content/components/layout/container/container.mdx
@@ -1,36 +1,79 @@
 ---
 title: Container
-caption: Component used to structure the content.
+caption: Keep content at an optimal reading width.
+badge: updated
 ---
 
-The `<Container>` component is a CSS grid layout component in which you can wrap child components. This component should be used if you want to structure content or form components. It is also useful when you want to use a [`<Breakout>`](/components/breakout/).
+The `<Container>` component is designed to limit the width of its content, ensuring an optimal reading experience. By constraining the content width, it helps maintain readability and prevents text from becoming difficult to follow on wide screens.
 
-`<Container>` width is based on used font and is optimized for readability. You can use `header` or `content` as content type and set the `size` prop to `small`, `medium` or `large`.
+## Usage
 
-It is also possible to set the alignment for the `<Container>` itself and for its children.
+The `<Container>` component is ideal for situations where you need to limit the width of content to ensure better readability and layout consistency. Here are some common use cases where the `<Container>` component is particularly useful:
 
-## Import
+- **Text-centric pages**: Pages that contain mostly text, such as FAQ pages, user guides, or terms of service, benefit from the `<Container>` component, as it ensures the text is easy to follow and comfortable to read.
+- **Hero sections**: Use the `<Container>` for hero banners with headlines and call-to-action buttons. Limiting the width keeps the focus on the main message, avoiding the visual dispersion that comes with overly wide text blocks.
+- **Centering content**: The `<Container>` is also useful when you need to center content on the page while ensuring it doesn't stretch too far, providing a consistent and polished appearance.
 
-To import the component you just have to use this code below.
+To limit text length, use the `<Text>` and `<Headline>` components inside the `<Container>`. This will automatically adjust the content length to make it easier to read.
 
-```tsx
-import { Container } from '@marigold/components';
-```
+<ComponentDemo file="./container-appearance.demo.tsx" />
 
-## Props
+### Dynamic width
 
-<PropsTable component={title} />
+The width of the `<Container>` is not fixed. It adjusts based on the font size to ensure the optimal reading length, which is determined by the number of characters per line. This results in the `<Container>` varying in size depending on its content.
+
+<ComponentDemo file="./container-dynamic-width.demo.tsx" />
+
+### Content length
+
+The length of the content within the `<Container>` can be adjusted using the `contentLength` property. This is useful when you want to customize the reading experience based on the type of content.
+
+For example, you might want to shorten the line length for smaller text blocks like quotes or testimonials, while allowing more characters per line for larger bodies of text, such as articles or blog posts. Adjusting `contentLength` helps to maintain readability and improve the overall user experience depending on the context.
+
+<ComponentDemo file="./container-content-length.demo.tsx" />
 
-## Examples
+### Complex layout
 
-### Container sizes
+The `<Container>` component can be combined with other layout components, such as `<Column>`, to create more complex and cohesive designs. This approach allows you to build immersive layouts while ensuring that text blocks remain readable.
 
-In this example the `size` prop is set to small. You can also choose medium or large size. It sets the width of the content of the container.
+<ComponentDemo file="./container-complex.demo.tsx" />
 
-<ComponentDemo file="./small-container.demo.tsx" />
+### Alignment
 
-## Text Container
+Using the `align` and `alignItems` prop, the `<Container>` component lets you align text and other elements to the left, center, or right, giving you flexibility in arranging content. This is helpful when you need to make some parts of the layout stand out, like centering a hero section. Good alignment makes the page look organized and improves how users experience the site.
+
+<ComponentDemo file="./container-alignment.demo.tsx" />
+
+## Props
+
+<StorybookHintMessage component={title} />
+
+<PropsTable component={title} />
 
-In some cases, the width of the content can be smaller than the container's width. You can use the `align` prop to align the container left, center or right. The `alignItems` props allows you to align the children left, center or right.
+## Related
 
-<ComponentDemo file="./full-container.demo.tsx" />
+<TeaserList
+  items={[
+    {
+      title: 'Building layouts',
+      href: '../../foundations/layouts',
+      caption: 'Learn how to build layouts.',
+      icon: (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M2.25 7.125C2.25 6.504 2.754 6 3.375 6h6c.621 0 1.125.504 1.125 1.125v3.75c0 .621-.504 1.125-1.125 1.125h-6a1.125 1.125 0 0 1-1.125-1.125v-3.75ZM14.25 8.625c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v8.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-8.25ZM3.75 16.125c0-.621.504-1.125 1.125-1.125h5.25c.621 0 1.125.504 1.125 1.125v2.25c0 .621-.504 1.125-1.125 1.125h-5.25a1.125 1.125 0 0 1-1.125-1.125v-2.25Z"
+          />
+        </svg>
+      ),
+    },
+  ]}
+/>
diff --git a/docs/content/components/layout/container/full-container.demo.tsx b/docs/content/components/layout/container/full-container.demo.tsx
deleted file mode 100644
index a73e4ed1e8..0000000000
--- a/docs/content/components/layout/container/full-container.demo.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Container, Headline, List, Text } from '@marigold/components';
-
-export default () => (
-  <Container size="large" alignItems="left" align="center">
-    <Headline level={2}>Star Wars - The Empire Strikes Back</Headline>
-    <Text>
-      It is a dark time for the Rebellion. Although the Death Star has been
-      destroyed, Imperial troops have driven the Rebel forces from their hidden
-      base and pursued them across the galaxy. Evading the dreaded Imperial
-      Starfleet, a group of freedom fighters led by Luke Skywalker has
-      established a new secret base on the remote ice world of Hoth. The evil
-      lord Darth Vader, obsessed with finding young Skywalker, has dispatched
-      thousands of remote probes into the far reaches of space....
-    </Text>
-    <List>
-      <List.Item>Luke</List.Item>
-      <List.Item>Leia</List.Item>
-      <List.Item>Han Solo</List.Item>
-      <List.Item>Chewbacca</List.Item>
-      <List.Item>R2D2</List.Item>
-      <List.Item>C3PO</List.Item>
-      <List.Item>Darth Vader</List.Item>
-    </List>
-  </Container>
-);
diff --git a/docs/content/components/layout/container/small-container.demo.tsx b/docs/content/components/layout/container/small-container.demo.tsx
deleted file mode 100644
index d51a5f2c45..0000000000
--- a/docs/content/components/layout/container/small-container.demo.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Container, Headline, Text } from '@marigold/components';
-
-export default () => (
-  <>
-    <Container contentType="header" size="small" align="center">
-      <Headline level={2}>Star Wars - The Empire Strikes Back</Headline>
-    </Container>
-    <Container size="small" align="center">
-      <Text>
-        It is a dark time for the Rebellion. Although the Death Star has been
-        destroyed, Imperial troops have driven the Rebel forces from their
-        hidden base and pursued them across the galaxy.
-      </Text>
-    </Container>
-  </>
-);
diff --git a/docs/public/marigold-watering.webp b/docs/public/marigold-watering.webp
new file mode 100644
index 0000000000..c19c1ba7bd
Binary files /dev/null and b/docs/public/marigold-watering.webp differ
diff --git a/docs/public/venues/botanical-banter.webp b/docs/public/venues/botanical-banter.webp
new file mode 100644
index 0000000000..90f1c68a3d
Binary files /dev/null and b/docs/public/venues/botanical-banter.webp differ
diff --git a/docs/public/venues/chuckles-and-chill.webp b/docs/public/venues/chuckles-and-chill.webp
new file mode 100644
index 0000000000..5c0fca6379
Binary files /dev/null and b/docs/public/venues/chuckles-and-chill.webp differ
diff --git a/docs/public/venues/comedy-show.webp b/docs/public/venues/comedy-show.webp
new file mode 100644
index 0000000000..1778e117db
Binary files /dev/null and b/docs/public/venues/comedy-show.webp differ
diff --git a/docs/public/venues/petal-punchlines.webp b/docs/public/venues/petal-punchlines.webp
new file mode 100644
index 0000000000..0526fe5e2d
Binary files /dev/null and b/docs/public/venues/petal-punchlines.webp differ
diff --git a/packages/components/src/Accordion/Accordion.test.tsx b/packages/components/src/Accordion/Accordion.test.tsx
index 5be243fac1..fe7bae7e9f 100644
--- a/packages/components/src/Accordion/Accordion.test.tsx
+++ b/packages/components/src/Accordion/Accordion.test.tsx
@@ -135,7 +135,9 @@ test('accepts variant and size classnames', () => {
   expect(button).toHaveAttribute('aria-expanded', 'true');
 
   const item = screen.getByText('infos');
-  expect(item.className).toMatchInlineSnapshot(`"text-[--color] text-left"`);
+  expect(item.className).toMatchInlineSnapshot(
+    `"text-[--color] max-w-[--maxHeadlineWidth] text-left"`
+  );
 });
 
 test('default full width', () => {
diff --git a/packages/components/src/Autocomplete/Autocomplete.stories.tsx b/packages/components/src/Autocomplete/Autocomplete.stories.tsx
index d3cbd0778e..41e4e7c98f 100644
--- a/packages/components/src/Autocomplete/Autocomplete.stories.tsx
+++ b/packages/components/src/Autocomplete/Autocomplete.stories.tsx
@@ -3,7 +3,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Key, useState } from 'react';
 import { Text } from 'react-aria-components';
 import { useAsyncList } from '@react-stately/data';
-import { Container } from '../Container';
 import { Stack } from '../Stack';
 import { Autocomplete } from './Autocomplete';
 
@@ -120,38 +119,36 @@ export const Controlled: Story = {
     const keyToRender = submitted[0] !== null ? submitted[0].toString() : null;
 
     return (
-      <Container size="large">
-        <Stack space={4}>
-          <Autocomplete
-            {...args}
-            value={current}
-            onChange={setCurrent}
-            onSubmit={(key, val) => setSubmitted([key, val])}
-            disabledKeys={['star-trek']}
+      <Stack space={4}>
+        <Autocomplete
+          {...args}
+          value={current}
+          onChange={setCurrent}
+          onSubmit={(key, val) => setSubmitted([key, val])}
+          disabledKeys={['star-trek']}
+        >
+          <Autocomplete.Option id="harry-potter" textValue="Harry Potter">
+            Harry Potter
+          </Autocomplete.Option>
+          <Autocomplete.Option
+            id="lord-of-the-rings"
+            textValue="Lord of the Rings"
           >
-            <Autocomplete.Option id="harry-potter" textValue="Harry Potter">
-              Harry Potter
-            </Autocomplete.Option>
-            <Autocomplete.Option
-              id="lord-of-the-rings"
-              textValue="Lord of the Rings"
-            >
-              Lord of the Rings
-            </Autocomplete.Option>
-            <Autocomplete.Option id="star-wars" textValue="Star Wars">
-              Star Wars
-            </Autocomplete.Option>
-            <Autocomplete.Option id="star-trek" textValue="Star Trek">
-              Star Trek
-            </Autocomplete.Option>
-            <Autocomplete.Option id="firefly">Firefly</Autocomplete.Option>
-          </Autocomplete>
-          <pre>current: {current}</pre>
-          <pre>
-            submitted: (key: {keyToRender}, value: {submitted[1]})
-          </pre>
-        </Stack>
-      </Container>
+            Lord of the Rings
+          </Autocomplete.Option>
+          <Autocomplete.Option id="star-wars" textValue="Star Wars">
+            Star Wars
+          </Autocomplete.Option>
+          <Autocomplete.Option id="star-trek" textValue="Star Trek">
+            Star Trek
+          </Autocomplete.Option>
+          <Autocomplete.Option id="firefly">Firefly</Autocomplete.Option>
+        </Autocomplete>
+        <pre>current: {current}</pre>
+        <pre>
+          submitted: (key: {keyToRender}, value: {submitted[1]})
+        </pre>
+      </Stack>
     );
   },
 };
diff --git a/packages/components/src/Body/Body.stories.tsx b/packages/components/src/Body/Body.stories.tsx
index 142234715a..a303044081 100644
--- a/packages/components/src/Body/Body.stories.tsx
+++ b/packages/components/src/Body/Body.stories.tsx
@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: args => (
-    <Container contentType="content" size="medium">
+    <Container>
       <Body {...args}>
         <strong>Professor Severus Snape</strong> (9 January, 1960[1] - 2 May,
         1998)[2] was an English half-blood[3] wizard serving as Potions Master
diff --git a/packages/components/src/Breakout/Breakout.stories.tsx b/packages/components/src/Breakout/Breakout.stories.tsx
index d5c2e4e8e3..0256c5ff26 100644
--- a/packages/components/src/Breakout/Breakout.stories.tsx
+++ b/packages/components/src/Breakout/Breakout.stories.tsx
@@ -1,51 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Aspect } from '../Aspect';
 import { Container } from '../Container';
-import { Image } from '../Image';
 import { Text } from '../Text';
 import { Breakout } from './Breakout';
 
 const meta = {
   title: 'Components/Breakout',
   component: Breakout,
-  argTypes: {
-    alignX: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'center', 'right'],
-
-      description: 'horizontal alignment',
-      table: {
-        defaultValue: {
-          summary: 'top',
-        },
-      },
-    },
-    alignY: {
-      control: {
-        type: 'select',
-      },
-      options: ['top', 'center', 'bottom'],
-      description: 'vertical alignment',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
-    },
-    height: {
-      control: {
-        type: 'text',
-      },
-      description: 'The height of the breakout',
-    },
-  },
-  args: {
-    alignY: 'top',
-    alignX: 'left',
-  },
 } satisfies Meta<typeof Breakout>;
 
 export default meta;
@@ -55,74 +16,38 @@ export const Basic: Story = {
   render: args => {
     return (
       <Container align="center">
-        <div className="h-[80px] w-full border border-[#ced4da]" />
+        <Text>
+          Life in the Star Wars universe is a mix of adventure, danger, and
+          wonder, shaped by countless star systems and diverse civilizations.
+          From the bustling metropolis of Coruscant, where politicians and
+          traders navigate the complexities of galactic politics, to the barren
+          dunes of Tatooine, where moisture farmers scrape by and bounty hunters
+          lurk in the shadows, every planet offers a different story. For some,
+          life means piloting a starship through hyperspace, seeking freedom
+          among the stars, while for others, it's a fight for survival against
+          the tyranny of the Empire or the chaos of the criminal underworld.
+          Across the galaxy, there's always a sense of something greater—whether
+          it's the mystical Force, the bond between allies, or the quest for
+          hope in a galaxy torn by conflict.
+        </Text>
         <Breakout {...args}>
-          <p>Breakout</p>
+          <strong>Breakout</strong>
         </Breakout>
-        <div className="h-[80px] w-full border border-[#ced4da]" />
+        <Text>
+          Life in the Star Wars universe is a mix of adventure, danger, and
+          wonder, shaped by countless star systems and diverse civilizations.
+          From the bustling metropolis of Coruscant, where politicians and
+          traders navigate the complexities of galactic politics, to the barren
+          dunes of Tatooine, where moisture farmers scrape by and bounty hunters
+          lurk in the shadows, every planet offers a different story. For some,
+          life means piloting a starship through hyperspace, seeking freedom
+          among the stars, while for others, it's a fight for survival against
+          the tyranny of the Empire or the chaos of the criminal underworld.
+          Across the galaxy, there's always a sense of something greater—whether
+          it's the mystical Force, the bond between allies, or the quest for
+          hope in a galaxy torn by conflict.
+        </Text>
       </Container>
     );
   },
 };
-
-export const ExampleText: Story = {
-  render: args => (
-    <Container size="large" align="center">
-      <Text>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry. Lorem Ipsum has been the industry's standard dummy text ever
-        since the 1500s, when an unknown printer took a galley of type and
-        scrambled it to make a type specimen book. It has survived not only five
-        centuries, but also the leap into electronic typesetting, remaining
-        essentially unchanged. It was popularised in the 1960s with the release
-        of Letraset sheets containing Lorem Ipsum passages, and more recently
-        with desktop publishing software like Aldus PageMaker including versions
-        of Lorem Ipsum.
-      </Text>
-      <Breakout {...args}>
-        <div className="h-[100px] border border-[#ced4da]">
-          BREAKOUT element inside a container
-        </div>
-      </Breakout>
-      <Text>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry. Lorem Ipsum has been the industry's standard dummy text ever
-        since the 1500s, when an unknown printer took a galley of type and
-        scrambled it to make a type specimen book. It has survived not only five
-        centuries, but also the leap into electronic typesetting, remaining
-        essentially unchanged. It was popularised in the 1960s with the release
-        of Letraset sheets containing Lorem Ipsum passages, and more recently
-        with desktop publishing software like Aldus PageMaker including versions
-        of Lorem Ipsum.
-      </Text>
-    </Container>
-  ),
-};
-
-export const ExampleFrame: Story = {
-  render: args => (
-    <Container align="center">
-      <Text>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry. Lorem Ipsum has been the industry's standard dummy text ever
-        since the 1500s, when an unknown printer took a galley of type and
-        scrambled it to make a type specimen book.
-      </Text>
-      <Breakout {...args}>
-        <Aspect ratio="ultrawide">
-          <Image
-            src="https://images.unsplash.com/photo-1511468102400-883d6ea28755?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
-            alt="Black Forest"
-          />
-        </Aspect>
-      </Breakout>
-      <Text>
-        It has survived not only five centuries, but also the leap into
-        electronic typesetting, remaining essentially unchanged. It was
-        popularised in the 1960s with the release of Letraset sheets containing
-        Lorem Ipsum passages, and more recently with desktop publishing software
-        like Aldus PageMaker including versions of Lorem Ipsum.
-      </Text>
-    </Container>
-  ),
-};
diff --git a/packages/components/src/Breakout/Breakout.test.tsx b/packages/components/src/Breakout/Breakout.test.tsx
index 81fa77e2dc..7cf30cd2f9 100644
--- a/packages/components/src/Breakout/Breakout.test.tsx
+++ b/packages/components/src/Breakout/Breakout.test.tsx
@@ -2,61 +2,8 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { Breakout } from './Breakout';
 
-test('has gridColumn, alignment and default width via classname', () => {
+test('spans all columns', () => {
   render(<Breakout>breakout</Breakout>);
   const breakout = screen.getByText(/breakout/);
-  expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
-  );
-});
-test('supports horizontal center', () => {
-  render(<Breakout alignX="center">breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-center items-center flex h-[--height]"`
-  );
-});
-
-test('supports horizontalAlign right', () => {
-  render(<Breakout alignX="right">breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout).toHaveClass(`justify-end`);
-});
-
-test('supports default vertical align top', () => {
-  render(<Breakout>breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
-  );
-});
-
-test('supports verticalAlign center', () => {
-  render(<Breakout alignY="center">breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout).toHaveClass(`items-center`);
-});
-
-test('supports verticalAlign bottom', () => {
-  render(<Breakout alignY="bottom">breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-end flex h-[--height]"`
-  );
-});
-
-test('supports height prop', () => {
-  render(<Breakout height="200px">breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
-  );
-});
-
-test('no align set', () => {
-  render(<Breakout height="200px">breakout</Breakout>);
-  const breakout = screen.getByText(/breakout/);
-  expect(breakout.className).toMatchInlineSnapshot(
-    `"col-start-[1_!important] col-end-[-1_!important] w-full justify-start items-center flex h-[--height]"`
-  );
+  expect(breakout.className).toMatchInlineSnapshot(`"![grid-column:1/-1]"`);
 });
diff --git a/packages/components/src/Breakout/Breakout.tsx b/packages/components/src/Breakout/Breakout.tsx
index 358f3aa81e..e5c515772d 100755
--- a/packages/components/src/Breakout/Breakout.tsx
+++ b/packages/components/src/Breakout/Breakout.tsx
@@ -1,46 +1,10 @@
 import { ReactNode } from 'react';
-import { alignment, cn, createVar } from '@marigold/system';
 import type { AriaRegionProps } from '@marigold/types';
 
 export interface BreakoutProps extends AriaRegionProps {
   children?: ReactNode;
-
-  /**
-   * Set the height of the breakout element.
-   */
-  height?: string;
-
-  /**
-   * Horizontal alignment of the items inside the breakout element.
-   * @default left
-   */
-  alignX?: keyof typeof alignment.horizontal.alignmentX;
-
-  /**
-   * Vertical alignment of the items inside the breakout element.
-   * @default top
-   */
-  alignY?: keyof typeof alignment.horizontal.alignmentY;
 }
 
-export const Breakout = ({
-  height,
-  children,
-  alignX = 'left',
-  alignY = 'center',
-}: BreakoutProps) => {
-  return (
-    <div
-      className={cn(
-        'col-start-[1_!important] col-end-[-1_!important] w-full',
-        alignX && alignment?.horizontal?.alignmentX[alignX],
-        alignY && alignment?.horizontal?.alignmentY[alignY],
-        alignX || alignY ? 'flex' : 'block',
-        'h-[--height]'
-      )}
-      style={createVar({ height })}
-    >
-      {children}
-    </div>
-  );
+export const Breakout = ({ children }: BreakoutProps) => {
+  return <div className="![grid-column:1/-1]">{children}</div>;
 };
diff --git a/packages/components/src/Card/Card.stories.tsx b/packages/components/src/Card/Card.stories.tsx
index e4bdc68dba..6cbbda8962 100644
--- a/packages/components/src/Card/Card.stories.tsx
+++ b/packages/components/src/Card/Card.stories.tsx
@@ -76,7 +76,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   render: args => (
-    <Container contentType="content" size="medium">
+    <Container>
       <Card {...args}>
         <h2>Professor Severus Snape</h2>
         <section>
diff --git a/packages/components/src/Container/Container.stories.tsx b/packages/components/src/Container/Container.stories.tsx
index 5b3f6cd4f9..070988cbf9 100644
--- a/packages/components/src/Container/Container.stories.tsx
+++ b/packages/components/src/Container/Container.stories.tsx
@@ -1,38 +1,44 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { Aspect } from '../Aspect';
+import { Image } from '../Image';
+import { Text } from '../Text';
 import { Container } from './Container';
 
 const meta = {
   title: 'Components/Container',
   component: Container,
   argTypes: {
-    contentType: {
+    contentLength: {
       control: {
         type: 'select',
       },
-      options: ['content', 'header'],
-      description: 'choose between content and header',
+      options: ['short', 'default', 'long'],
+      description: 'Length of the content',
     },
-    size: {
+    align: {
       control: {
         type: 'select',
       },
-      options: ['small', 'medium', 'large'],
-      description: 'choose between small, medium and large size',
+      options: ['left', 'center', 'right'],
+      description: 'Set alignment the content inside the container',
     },
-    align: {
+    alignItems: {
       control: {
         type: 'select',
       },
       options: ['left', 'center', 'right'],
-      description: 'set alignment the content inside the container',
+      description: 'Set alignment of the items inside the container',
     },
-    alignItems: {
+    space: {
       control: {
-        type: 'select',
+        type: 'text',
+      },
+      table: {
+        defaultValue: { summary: '0' },
       },
-      options: ['left', 'center', 'right', 'none'],
-      description: 'set alignment of the items inside the container',
+      description:
+        'Value representing the space between the two elements, for that we use tailwind tokens.',
     },
   },
 } satisfies Meta<typeof Container>;
@@ -40,10 +46,13 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Content: Story = {
+export const Base: Story = {
+  args: {
+    space: 4,
+  },
   render: args => (
     <Container {...args}>
-      <p>
+      <Text>
         It is a dark time for the Rebellion. Although the Death Star has been
         destroyed, Imperial troops have driven the Rebel forces from their
         hidden base and pursued them across the galaxy. Evading the dreaded
@@ -51,48 +60,14 @@ export const Content: Story = {
         has established a new secret base on the remote ice world of Hoth. The
         evil lord Darth Vader, obsessed with finding young Skywalker, has
         dispatched thousands of remote probes into the far reaches of space....
-      </p>
+      </Text>
+      <Aspect maxWidth="400px" ratio="ultrawide">
+        <Image
+          src="https://images.unsplash.com/photo-1618336753974-aae8e04506aa?q=80&w=2970&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Grogu"
+          fit="cover"
+        />
+      </Aspect>
     </Container>
   ),
 };
-
-export const Header: Story = {
-  render: args => (
-    <Container contentType="header" {...args}>
-      <h1>Star Wars - The Empire Strikes Back</h1>
-    </Container>
-  ),
-};
-
-export const InnerContent: Story = {
-  render: args => (
-    <div className="bg-blue-100 p-1">
-      <Container {...args}>
-        <h2>Star Wars - The Empire Strikes Back</h2>
-        <div className="w-full pt-1">
-          <p>
-            It is a dark time for the Rebellion. Although the Death Star has
-            been destroyed, Imperial troops have driven the Rebel forces from
-            their hidden base and pursued them across the galaxy. Evading the
-            dreaded Imperial Starfleet, a group of freedom fighters led by Luke
-            Skywalker has established a new secret base on the remote ice world
-            of Hoth. The evil lord Darth Vader, obsessed with finding young
-            Skywalker, has dispatched thousands of remote probes into the far
-            reaches of space....
-          </p>
-        </div>
-        <div className="width-[20ch]">
-          <ul>
-            <li>Luke</li>
-            <li>Leia</li>
-            <li>Han Solo</li>
-            <li>Chewbacca</li>
-            <li>R2D2</li>
-            <li>C3PO</li>
-            <li>Darth Vader</li>
-          </ul>
-        </div>
-      </Container>
-    </div>
-  ),
-};
diff --git a/packages/components/src/Container/Container.test.tsx b/packages/components/src/Container/Container.test.tsx
index 6171b0b713..ec721f23fc 100644
--- a/packages/components/src/Container/Container.test.tsx
+++ b/packages/components/src/Container/Container.test.tsx
@@ -1,121 +1,110 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import React from 'react';
+import { Theme, cva } from '@marigold/system';
+import { Headline } from '../Headline';
+import { Text } from '../Text';
+import { setup } from '../test.utils';
 import { Container } from './Container';
 
-test('supports default contentType content', () => {
+const theme: Theme = {
+  name: 'test',
+  colors: {
+    emerald: 'rgb(5 150 105);',
+  },
+  components: {
+    Headline: cva(''),
+    Text: cva(''),
+  },
+};
+const { render } = setup({ theme });
+
+test('defines a content length for text and headlines', () => {
   render(
-    <Container data-testid="container">
-      <p>Coding makes fun</p>
-    </Container>
+    <>
+      <Container data-testid="container" />
+    </>
   );
+
   const container = screen.getByTestId(/container/);
-  expect(container).toMatchInlineSnapshot(`
-    <div
-      class="grid grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr] [&>*]:col-[1]"
-      data-testid="container"
-      style="--maxWidth: 45ch;"
-    >
-      <p>
-        Coding makes fun
-      </p>
-    </div>
-  `);
+  expect(container.style.getPropertyValue('--maxTextWidth')).toBeDefined();
+  expect(container.style.getPropertyValue('--maxHeadlineWidth')).toBeDefined();
 });
 
-test('supports contentType header', () => {
+test('limits with of <Text> and <Headline> children (via CSS var)', () => {
   render(
-    <Container contentType="header" data-testid="container">
-      <p>sdf</p>
+    <Container data-testid="container">
+      <Headline>Yay</Headline>
+      <Text>Coding makes fun</Text>
     </Container>
   );
+
   const container = screen.getByTestId(/container/);
-  expect(container).toMatchInlineSnapshot(`
-    <div
-      class="grid grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr] [&>*]:col-[1]"
-      data-testid="container"
-      style="--maxWidth: 25ch;"
-    >
-      <p>
-        sdf
-      </p>
-    </div>
-  `);
+  const headline = screen.getByText('Yay');
+  const text = screen.getByText('Coding makes fun');
+
+  expect(Array.from(container.style)).toContain('--maxHeadlineWidth');
+  expect(Array.from(container.style)).toContain('--maxTextWidth');
+
+  expect(headline).toHaveClass('max-w-[--maxHeadlineWidth]');
+  expect(text).toHaveClass('max-w-[--maxTextWidth]');
 });
 
-test('supports size small', () => {
+test('supports different lengths for content', () => {
   render(
-    <Container size="small" data-testid="container">
-      <p>sdf</p>
-    </Container>
+    <>
+      <Container data-testid="container-default" />
+      <Container data-testid="container-long" contentLength="long" />
+    </>
   );
-  const container = screen.getByTestId(/container/);
-  expect(container).toMatchInlineSnapshot(`
-    <div
-      class="grid grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr] [&>*]:col-[1]"
-      data-testid="container"
-      style="--maxWidth: 20ch;"
-    >
-      <p>
-        sdf
-      </p>
-    </div>
-  `);
-});
 
-test('supports size large', () => {
-  render(
-    <Container size="large" data-testid="container">
-      <p>sdf</p>
-    </Container>
+  const defaultContainer = screen.getByTestId(/container-default/);
+  const longContainer = screen.getByTestId(/container-long/);
+
+  expect(defaultContainer.style.getPropertyValue('--maxTextWidth')).not.toEqual(
+    longContainer.style.getPropertyValue('--maxTextWidth')
   );
-  const container = screen.getByTestId(/container/);
-  expect(container).toMatchInlineSnapshot(`
-    <div
-      class="grid grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr] [&>*]:col-[1]"
-      data-testid="container"
-      style="--maxWidth: 60ch;"
-    >
-      <p>
-        sdf
-      </p>
-    </div>
-  `);
+  expect(
+    defaultContainer.style.getPropertyValue('--maxHeadlineWidth')
+  ).not.toEqual(longContainer.style.getPropertyValue('--maxHeadlineWidth'));
 });
 
-test('supports default align container left', () => {
+test('aligns children on left by default', () => {
   render(
     <Container data-testid="container">
-      <p>sdf</p>
+      <Text>some text</Text>
     </Container>
   );
+
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveClass(`[&>*]:col-[1]`);
+  expect(container).toHaveClass(`*:col-[1]`);
 });
 
-test('supports align container center', () => {
+test('allows to align children to the center', () => {
   render(
-    <Container align="center" data-testid="container">
-      <p>sdf</p>
+    <Container data-testid="container" align="center">
+      <Text>some text</Text>
     </Container>
   );
+
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveClass(`[&>*]:col-[2]`);
+  expect(container).toHaveClass(`*:col-[2]`);
 });
 
-test('supports align container right', () => {
+test('allows to align children to the right', () => {
   render(
-    <Container align="right" data-testid="container">
-      <p>sdf</p>
+    <Container data-testid="container" align="right">
+      <Text>some text</Text>
     </Container>
   );
+
   const container = screen.getByTestId(/container/);
-  expect(container).toHaveClass(`[&>*]:col-[3]`);
+  expect(container).toHaveClass(`*:col-[3]`);
 });
 
 test('supports default align items none', () => {
   render(
     <Container data-testid="container">
-      <p>sdf</p>
+      <Text>some text</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
@@ -125,7 +114,7 @@ test('supports default align items none', () => {
 test('supports align items center', () => {
   render(
     <Container alignItems="center" data-testid="container">
-      <p>sdf</p>
+      <Text>some text</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
@@ -135,9 +124,20 @@ test('supports align items center', () => {
 test('supports align items right', () => {
   render(
     <Container alignItems="right" data-testid="container">
-      <p>sdf</p>
+      <Text>some text</Text>
     </Container>
   );
   const container = screen.getByTestId(/container/);
   expect(container).toHaveClass(`place-items-end`);
 });
+
+test('accepts and uses spacing from theme', () => {
+  render(
+    <Container space={2} data-testid="container">
+      <Text>one</Text>
+      <Text>two</Text>
+    </Container>
+  );
+  const container = screen.getByTestId(/container/);
+  expect(container).toHaveClass(`gap-2`);
+});
diff --git a/packages/components/src/Container/Container.tsx b/packages/components/src/Container/Container.tsx
index ec3a10cf28..e227de3788 100755
--- a/packages/components/src/Container/Container.tsx
+++ b/packages/components/src/Container/Container.tsx
@@ -1,66 +1,78 @@
-import { ReactNode } from 'react';
-import type { GridColsAlignProp, PlaceItemsProp } from '@marigold/system';
-import {
-  cn,
-  createVar,
-  gridColsAlign,
-  gridColumn,
-  placeItems,
-} from '@marigold/system';
+import type { ReactNode } from 'react';
+import type { GapSpaceProp, PlaceItemsProp } from '@marigold/system';
+import { cn, createVar, gapSpace, placeItems } from '@marigold/system';
 import type { AriaRegionProps } from '@marigold/types';
 
-export interface ContainerProps extends AriaRegionProps {
+// Helpers
+// ---------------
+const containerTextLength = {
+  short: '40ch',
+  default: '60ch',
+  long: '80ch',
+};
+
+const containerHeadlineLength = {
+  short: '20ch',
+  default: '25ch',
+  long: '35ch',
+};
+
+export const gridColsAlign = {
+  left: 'grid-cols-[minmax(0,max-content)_1fr_1fr]',
+  center: 'grid-cols-[1fr_minmax(0,max-content)_1fr]',
+  right: ' grid-cols-[1fr_1fr_minmax(0,max-content)]',
+};
+
+export const gridColumn = {
+  left: '*:col-[1]',
+  center: '*:col-[2]',
+  right: '*:col-[3]',
+};
+
+// Props
+// ---------------
+export interface ContainerProps extends GapSpaceProp, AriaRegionProps {
   children?: ReactNode;
   /**
-   * The content type of the container.
-   * @default 'content'
+   * Width of the container.
+   * @default 'default'
    */
-  contentType?: 'content' | 'header';
-  size?: keyof typeof content | keyof typeof header;
+  contentLength?: keyof typeof containerTextLength;
   /**
    * Set alignment the content inside the container.
-   * @default left
+   * @default 'left'
    */
-  align?: GridColsAlignProp['align'];
+  align?: keyof typeof gridColsAlign;
   /**
    * Set alignment of the items inside the container.
    */
   alignItems?: PlaceItemsProp['align'];
 }
 
-const content = {
-  small: '20ch',
-  medium: '45ch',
-  large: '60ch',
-};
-
-const header = {
-  small: '20ch',
-  medium: '25ch',
-  large: '35ch',
-};
-
+// Component
+// ---------------
 export const Container = ({
-  contentType = 'content',
-  size = 'medium',
+  contentLength = 'default',
   align = 'left',
   alignItems = 'none',
+  space = 0,
   children,
   ...props
-}: ContainerProps) => {
-  const maxWidth = contentType === 'content' ? content[size] : header[size];
-  return (
-    <div
-      {...props}
-      className={cn(
-        'grid',
-        placeItems[alignItems],
-        gridColsAlign[align],
-        gridColumn[align]
-      )}
-      style={createVar({ maxWidth })}
-    >
-      {children}
-    </div>
-  );
-};
+}: ContainerProps) => (
+  <div
+    {...props}
+    className={cn(
+      'grid',
+      placeItems[alignItems],
+      gridColsAlign[align],
+      gridColumn[align],
+      gapSpace[space]
+    )}
+    style={createVar({
+      maxTextWidth: containerTextLength[contentLength],
+      maxHeadlineWidth: containerHeadlineLength[contentLength],
+    })}
+  >
+    {children}
+  </div>
+);
diff --git a/packages/components/src/Header/Header.stories.tsx b/packages/components/src/Header/Header.stories.tsx
index c42fadd7b1..252f93e555 100644
--- a/packages/components/src/Header/Header.stories.tsx
+++ b/packages/components/src/Header/Header.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Container } from '../Container';
 import { Header } from './Header';
 
 const meta = {
@@ -24,9 +23,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
-  render: args => (
-    <Container contentType="content" size="medium">
-      <Header {...args}>Awsome Header</Header>
-    </Container>
-  ),
+  render: args => <Header {...args}>Awsome Header</Header>,
 };
diff --git a/packages/components/src/Headline/Headline.test.tsx b/packages/components/src/Headline/Headline.test.tsx
index ac222425b9..3c56dc93d7 100644
--- a/packages/components/src/Headline/Headline.test.tsx
+++ b/packages/components/src/Headline/Headline.test.tsx
@@ -60,13 +60,10 @@ test('uses "level-1" by default', () => {
   );
 
   const headline = screen.getByTestId('headline');
-
-  expect(headline).toMatchInlineSnapshot(`
-<h1
-  class="m-0 font-black text-[2rem] text-[--color] text-left"
-  data-testid="headline"
-/>
-`);
+  expect(headline.tagName).toEqual('H1');
+  expect(headline).toHaveClass(
+    theme.components.Headline!.variants!.size['level-1'] as string
+  );
 });
 
 test('headline accepts a variant', () => {
@@ -76,12 +73,7 @@ test('headline accepts a variant', () => {
     </ThemeProvider>
   );
   const headline = screen.getByTestId('headline');
-  expect(headline).toMatchInlineSnapshot(`
-<h1
-  class="m-0 font-black text-[2rem] font-small text-[--color] text-left"
-  data-testid="headline"
-/>
-`);
+  expect(headline).toHaveClass('font-small');
 });
 
 test('headline accepts align property', () => {
@@ -101,12 +93,10 @@ test('headline accepts other level', () => {
     </ThemeProvider>
   );
   const headline = screen.getByTestId('headline');
-  expect(headline).toMatchInlineSnapshot(`
-<h5
-  class="m-0 font-black text-base text-[--color] text-left"
-  data-testid="headline"
-/>
-`);
+  expect(headline.tagName).toEqual('H5');
+  expect(headline).toHaveClass(
+    theme.components.Headline!.variants!.size['level-5'] as string
+  );
 });
 
 test('get theme color', () => {
@@ -117,16 +107,12 @@ test('get theme color', () => {
   );
 
   const headline = screen.getByTestId('headline');
-  expect(headline).toMatchInlineSnapshot(`
-<h1
-  class="m-0 font-black text-[2rem] text-[--color] text-left"
-  data-testid="headline"
-  style="--color: rgb(5 150 105);;"
-/>
-`);
+  expect(headline.style.getPropertyValue('--color')).toEqual(
+    theme.colors!.emerald
+  );
 });
 
-test('support also string as level', () => {
+test('support string as level', () => {
   render(
     <ThemeProvider theme={theme}>
       <Headline data-testid="headline" level="2" />
@@ -134,10 +120,8 @@ test('support also string as level', () => {
   );
 
   const headline = screen.getByTestId('headline');
-  expect(headline).toMatchInlineSnapshot(`
-<h2
-  class="m-0 font-black mb-6 text-2xl text-[--color] text-left"
-  data-testid="headline"
-/>
-`);
+  expect(headline.tagName).toEqual('H2');
+  expect(headline).toHaveClass(
+    theme.components.Headline!.variants!.size['level-2'] as string
+  );
 });
diff --git a/packages/components/src/Headline/Headline.tsx b/packages/components/src/Headline/Headline.tsx
index 55d958f577..5b0ea2a1c4 100644
--- a/packages/components/src/Headline/Headline.tsx
+++ b/packages/components/src/Headline/Headline.tsx
@@ -52,7 +52,12 @@ const _Headline = ({
     <Heading
       level={Number(level)}
       {...props}
-      className={cn(classNames, 'text-[--color]', textAlign[align])}
+      className={cn(
+        classNames,
+        'text-[--color]',
+        'max-w-[--maxHeadlineWidth]', // possibly set by a <Container>
+        textAlign[align]
+      )}
       style={createVar({
         color: color && getColor(theme, color, color /* fallback */),
       })}
diff --git a/packages/components/src/Slider/Slider.stories.tsx b/packages/components/src/Slider/Slider.stories.tsx
index f9874321eb..1dec8c3ba3 100644
--- a/packages/components/src/Slider/Slider.stories.tsx
+++ b/packages/components/src/Slider/Slider.stories.tsx
@@ -1,12 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { FormEvent, useState } from 'react';
-import {
-  Container,
-  FieldBase,
-  FieldGroup,
-  Inline,
-  Stack,
-} from '@marigold/components';
+import { FieldBase, FieldGroup, Inline, Stack } from '@marigold/components';
 import { Button } from '../Button';
 import { Form } from '../Form/Form';
 import { Slider } from './Slider';
@@ -164,27 +158,25 @@ export const Forms: Story = {
     };
 
     return (
-      <Container size={'large'}>
-        <Form onSubmit={handleSubmit}>
-          <FieldGroup labelWidth={'100px'}>
-            <Stack space={2}>
-              <FieldBase label="Choose opacity:">
-                <Slider
-                  {...args}
-                  maxValue={100}
-                  thumbLabels={['opacity']}
-                  width={48}
-                />
-              </FieldBase>
-            </Stack>
-          </FieldGroup>
-          <Inline space={4} alignX={'right'}>
-            <Button variant="primary" type="submit">
-              Submit
-            </Button>
-          </Inline>
-        </Form>
-      </Container>
+      <Form onSubmit={handleSubmit}>
+        <FieldGroup labelWidth={'100px'}>
+          <Stack space={2}>
+            <FieldBase label="Choose opacity:">
+              <Slider
+                {...args}
+                maxValue={100}
+                thumbLabels={['opacity']}
+                width={48}
+              />
+            </FieldBase>
+          </Stack>
+        </FieldGroup>
+        <Inline space={4} alignX={'right'}>
+          <Button variant="primary" type="submit">
+            Submit
+          </Button>
+        </Inline>
+      </Form>
     );
   },
 };
@@ -200,28 +192,26 @@ export const MultiThumbsForm: Story = {
     };
 
     return (
-      <Container size={'large'}>
-        <Form onSubmit={handleSubmit}>
-          <FieldGroup labelWidth={'100px'}>
-            <Stack space={2}>
-              <FieldBase label="Age">
-                <Slider
-                  {...args}
-                  defaultValue={[20, 30]}
-                  maxValue={100}
-                  thumbLabels={['start', 'end']}
-                  width={60}
-                />
-              </FieldBase>
-            </Stack>
-          </FieldGroup>
-          <Inline space={4} alignX={'right'}>
-            <Button variant="primary" type="submit">
-              Submit
-            </Button>
-          </Inline>
-        </Form>
-      </Container>
+      <Form onSubmit={handleSubmit}>
+        <FieldGroup labelWidth={'100px'}>
+          <Stack space={2}>
+            <FieldBase label="Age">
+              <Slider
+                {...args}
+                defaultValue={[20, 30]}
+                maxValue={100}
+                thumbLabels={['start', 'end']}
+                width={60}
+              />
+            </FieldBase>
+          </Stack>
+        </FieldGroup>
+        <Inline space={4} alignX={'right'}>
+          <Button variant="primary" type="submit">
+            Submit
+          </Button>
+        </Inline>
+      </Form>
     );
   },
 };
diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx
index 72a0a2b8b5..f2b832de10 100644
--- a/packages/components/src/Text/Text.test.tsx
+++ b/packages/components/src/Text/Text.test.tsx
@@ -36,9 +36,7 @@ test('uses theme styles', () => {
   );
   const text = screen.getByText(/text/);
 
-  expect(text.className).toMatchInlineSnapshot(
-    `"text-[--color] outline-[--outline] font-["Arial"]"`
-  );
+  expect(text).toHaveClass(`font-["Arial"]`);
 });
 
 test('renders a <div> element by default', () => {
@@ -75,11 +73,7 @@ test('style props override theme styles', () => {
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);
-
-  expect(text.className).toMatchInlineSnapshot(
-    `"text-[--color] outline-[--outline] font-["Arial"]"`
-  );
-  expect(text.style.cssText).toMatchInlineSnapshot(`"--color: red-700;"`);
+  expect(text.style.getPropertyValue('--color')).toEqual('red-700');
 });
 
 test('get theme color', () => {
@@ -90,11 +84,5 @@ test('get theme color', () => {
   );
 
   const text = screen.getByTestId('text');
-  expect(text).toMatchInlineSnapshot(`
-<div
-  class="text-[--color] outline-[--outline] font-["Oswald_Regular"]"
-  data-testid="text"
-  style="--color: rgb(5 150 105);"
-/>
-`);
+  expect(text.style.getPropertyValue('--color')).toEqual(theme.colors!.emerald);
 });
diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx
index 7e452d5050..0942ec4d69 100644
--- a/packages/components/src/Text/Text.tsx
+++ b/packages/components/src/Text/Text.tsx
@@ -82,6 +82,7 @@ const _Text = ({
       {...elementType}
       className={cn(
         'text-[--color] outline-[--outline]',
+        'max-w-[--maxTextWidth]', // possibly set by a <Container>
         classNames,
         fontStyle && textStyle[fontStyle],
         align && textAlign[align],
diff --git a/packages/system/src/style-props.tsx b/packages/system/src/style-props.tsx
index a7ecf22b56..8b0a2a4ecf 100644
--- a/packages/system/src/style-props.tsx
+++ b/packages/system/src/style-props.tsx
@@ -510,19 +510,6 @@ export const textAlign = {
   right: 'text-right',
 };
 
-// for responsive reasons we needed to use the `minmax(0, 60ch)` value instead of `fit-content(60ch)`
-export const gridColsAlign = {
-  left: 'grid-cols-[minmax(0,_var(--maxWidth))_1fr_1fr]',
-  center: 'grid-cols-[1fr_minmax(0,_var(--maxWidth))_1fr]',
-  right: ' grid-cols-[1fr_1fr_minmax(0,_var(--maxWidth))]',
-};
-
-export const gridColumn = {
-  left: '[&>*]:col-[1]',
-  center: '[&>*]:col-[2]',
-  right: '[&>*]:col-[3]',
-};
-
 export const aspect = {
   square: 'aspect-[1]',
   landscape: 'aspect-[4/3]',
@@ -622,13 +609,6 @@ export type FontSizeProp = {
   fontSize?: keyof typeof textSize;
 };
 
-export type GridColsAlignProp = {
-  /**
-   * Set the alignment of grid columns.
-   */
-  align?: keyof typeof gridColsAlign;
-};
-
 export type GapSpaceProp = {
   /**
    * The space between the children. You can see allowed tokens [here](../../foundations/design-tokens?theme=core#spacing).