new wrapper utility: grid instead of margin: auto!

src/assets/css/utilities/wrapper.css

@@ -1,11 +1,39 @@
-/**
+/* © Ryan Mulligan - https://ryanmulligan.dev/blog/layout-breakouts/ */
- * WRAPPER
+
- * Sets a max width, adds a consistent gutter and horizontally
- * centers the contents
- * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
- */
 .wrapper {
-  margin-inline: auto;
+  --gap: clamp(1rem, 6vw, 3rem);
-  position: relative;
+  --full: minmax(var(--gap), 1fr);
-  inline-size: var(--wrapper-width, 85rem);
+  --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
+  --popout: minmax(0, 2rem);
+  --feature: minmax(0, 5rem);
+
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [popout-start] var(--popout)
+    [content-start] var(--content) [content-end]
+    var(--popout) [popout-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+.wrapper > * {
+  grid-column: content;
+}
+
+.prose-wrapper {
+  --wrapper-width: 64rem;
+}
+
+.popout {
+  grid-column: popout;
+}
+
+.feature {
+  grid-column: feature;
+}
+
+.full {
+  grid-column: full;
 }