From a96afc33a143cee79c13b0d73529091fd1c7042b Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Tue, 30 Jan 2024 18:27:23 +0100
Subject: [PATCH] new wrapper utility: grid instead of margin: auto!

---
 src/assets/css/utilities/wrapper.css | 46 ++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/utilities/wrapper.css b/src/assets/css/utilities/wrapper.css
index 4ea7f3d..f93e700 100644
--- a/src/assets/css/utilities/wrapper.css
+++ b/src/assets/css/utilities/wrapper.css
@@ -1,11 +1,39 @@
-/**
- * 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/
- */
+/* © Ryan Mulligan - https://ryanmulligan.dev/blog/layout-breakouts/ */
+
 .wrapper {
-  margin-inline: auto;
-  position: relative;
-  inline-size: var(--wrapper-width, 85rem);
+  --gap: clamp(1rem, 6vw, 3rem);
+  --full: minmax(var(--gap), 1fr);
+  --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;
 }