Remove content div wrappers. Use grid template columns for main to support stretch and breakout classes.

assets/sass/components/box/_box.scss

@@ -44,6 +44,10 @@
     width: fit-content;
   }
 
+  &--gutter {
+    padding-inline: var(--gutters);
+  }
+
   &--inverted {
     @extend %link-inverted;
     background: var(--color-border);
@@ -51,7 +55,7 @@
 
     // Make sure headings etc. also gets inverted.
     * {
-      color: inherit;
+      color: var(--color-text-bg);
     }
   }
 

assets/sass/components/cards/_cards.scss

@@ -23,6 +23,10 @@
     grid-column: span 2;
   }
 
+  &--gutter {
+    padding-inline: var(--gutters);
+  }
+
   &--inverted {
     @extend %link-inverted;
     background: var(--color-border);

assets/sass/components/stretch/_stretch.scss

@@ -1,12 +0,0 @@
-// Stretch content to the page edge.
-//
-// Requeried: Set max-page-width to a larger value than max-content-width.
-
-.stretch,
-%stretch {
-  width: 100%;
-
-  .main & {
-    max-width: none;
-  }
-}