From e9f2e4a55618fe34ebdfc99a39244c4c22d41c0f Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 30 Dec 2025 10:43:24 +0100
Subject: [PATCH 1/3] Adjust DevContainer at top breakpoint

---
 components/src/DevContainer/DevContainer.stories.svelte | 2 +-
 components/src/DevContainer/DevContainer.svelte         | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/components/src/DevContainer/DevContainer.stories.svelte b/components/src/DevContainer/DevContainer.stories.svelte
index e9daa99..1e74bdf 100644
--- a/components/src/DevContainer/DevContainer.stories.svelte
+++ b/components/src/DevContainer/DevContainer.stories.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <Story name="Default" asChild>
-	<DevContainer theme="light" paragraphsAbove={2} paragraphsBelow={2}>
+	<DevContainer theme="light" paragraphsAbove={2} paragraphsBelow={2} showGrid>
 		<DesignTokens>
 			<div class="chart">your chart here</div>
 		</DesignTokens>
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index 38f0781..0aac744 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -288,9 +288,6 @@
 		@media (min-width: 1024px) {
 			grid-column: 3 / 11;
 		}
-		@media (min-width: 1440px) {
-			grid-column: 4/10;
-		}
 	}
 	.article-header {
 		margin-bottom: 24px;
@@ -302,9 +299,6 @@
 		@media (min-width: 1024px) {
 			grid-column: 3 / 11;
 		}
-		@media (min-width: 1440px) {
-			grid-column: 4 / 10;
-		}
 	}
 	.article-eyebrow {
 		font-size: 0.875rem;

From c2e788eeb7048e069076cbf79c35ba3587722c51 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 30 Dec 2025 10:49:41 +0100
Subject: [PATCH 2/3] Breakout/medium: Drop top breakpoint

---
 components/src/Breakout/Breakout.stories.svelte | 2 ++
 components/src/Breakout/Breakout.svelte         | 4 ----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/src/Breakout/Breakout.stories.svelte b/components/src/Breakout/Breakout.stories.svelte
index a305e83..690bedd 100644
--- a/components/src/Breakout/Breakout.stories.svelte
+++ b/components/src/Breakout/Breakout.stories.svelte
@@ -15,6 +15,8 @@
 
 <Story name="Default" asChild>
 	<DevContainer
+		paragraphsAbove={1}
+		paragraphsBelow={1}
 		title="Autokauf-Dilemma: Elektroautos teuer, Verbrenner bald auch"
 		showPlayer={false}
 		showGrid
diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index 3a6c1ca..abd3eca 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -40,10 +40,6 @@
 			width: calc(var(--column-width) * 10 + var(--column-gap) * 9);
 			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
 		}
-		@media (min-width: 1440px) {
-			width: calc(var(--column-width) * 8 + var(--column-gap) * 7);
-			margin-left: calc((var(--column-width) * -1) + (var(--column-gap)) * -1);
-		}
 	}
 	.large {
 		@media (min-width: 640px) {

From 3ab04258d914114a85471d0dedcef34c3c6f8d63 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 30 Dec 2025 11:00:46 +0100
Subject: [PATCH 3/3] Apply change to large, bleed breakouts

---
 components/src/Breakout/Breakout.svelte         | 7 -------
 components/src/DevContainer/DevContainer.svelte | 3 ---
 2 files changed, 10 deletions(-)

diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index abd3eca..7323bb3 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -50,10 +50,6 @@
 			width: calc(var(--column-width) * 12 + var(--column-gap) * 11);
 			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -2));
 		}
-		@media (min-width: 1440px) {
-			width: calc(var(--column-width) * 10 + var(--column-gap) * 11);
-			margin-left: calc((var(--column-width) * -2 + var(--column-gap) * -3));
-		}
 	}
 	.bleed {
 		width: 100vw;
@@ -68,8 +64,5 @@
 		@media (min-width: 1024px) {
 			margin-left: calc(var(--column-width) * -2 + (var(--column-gap)) * -2 - var(--margin) * 1);
 		}
-		@media (min-width: 1440px) {
-			margin-left: calc(var(--column-width) * -3 + (var(--column-gap)) * -3 - var(--margin) * 1);
-		}
 	}
 </style>
diff --git a/components/src/DevContainer/DevContainer.svelte b/components/src/DevContainer/DevContainer.svelte
index 0aac744..90a69bb 100644
--- a/components/src/DevContainer/DevContainer.svelte
+++ b/components/src/DevContainer/DevContainer.svelte
@@ -394,8 +394,5 @@
 		@media (min-width: 1024px) {
 			grid-column: 3 / 11;
 		}
-		@media (min-width: 1440px) {
-			grid-column: 4/10;
-		}
 	}
 </style>