diff --git a/components/src/Breakout/Breakout.svelte b/components/src/Breakout/Breakout.svelte
index 7c45b4e2..936e81ba 100644
--- a/components/src/Breakout/Breakout.svelte
+++ b/components/src/Breakout/Breakout.svelte
@@ -30,25 +30,14 @@
 		@return calc((var(--column-width) + var(--column-gap)) * -#{$cols});
 	}
 
-	// Bleed helper to calculate negative margin based on number of columns,
-	// with special handling for XL screens
-	@function bleed($cols, $xl: false) {
-		@if $xl {
-			@return calc(
-				(var(--column-width) + var(--column-gap)) * -#{$cols} - max(
-						0px,
-						(100vw - #{$content-max-width}) / 2
-					)
-			);
-		} @else {
-			@return calc((var(--column-width) + var(--column-gap)) * -#{$cols} - var(--margin));
-		}
+	// Bleed helper to calculate negative margin based on number of columns
+	@function bleed($cols) {
+		@return calc((var(--column-width) + var(--column-gap)) * -#{$cols} - var(--margin));
 	}
 
 	.container {
-		--margin: 16px;
+		--margin: max(16px, calc((100vw - #{$content-max-width}) / 2));
 		--column-gap: 16px;
-
 		--grid-width: min(calc(100vw - var(--margin) * 2), #{$content-max-width});
 		--column-width: calc(
 			(var(--grid-width) - var(--column-gap) * #{($grid-columns - 1)}) / #{$grid-columns}
@@ -94,8 +83,5 @@
 		@media (min-width: $bp-lg) {
 			margin-left: bleed(2);
 		}
-		@media (min-width: $bp-xl) {
-			margin-left: bleed(2, true);
-		}
 	}
 </style>
diff --git a/components/src/DevContainer/GridInspector.svelte b/components/src/DevContainer/GridInspector.svelte
index 9d974a7c..d9e85592 100644
--- a/components/src/DevContainer/GridInspector.svelte
+++ b/components/src/DevContainer/GridInspector.svelte
@@ -35,7 +35,7 @@
 		max-width: none;
 	}
 	.col {
-		background: rgb(104, 120, 179);
+		background: rgba(104, 120, 179, 60%);
 		flex-grow: 0;
 		&:first-child {
 			border-left: 0;