4 files changed, 36 insertions, 16 deletions
diff --git a/public/css/layout/grid.css b/public/css/layout/grid.css
index 2ca5b21..fc7ccee 100644
--- a/public/css/layout/grid.css
+++ b/public/css/layout/grid.css
@@ -4,13 +4,18 @@
   nav,
   :is(main, article) > section:not(:is(section, header) :is(section, header))
 ) {
-  padding-inline-start: var(--grid-padding-start);
-  padding-inline-end: calc(
+  padding-inline-start: calc(0.5 * (
+    100vw - (var(--grid-padding-start) + (
+      var(--grid-column-width) * var(--grid-column-count) +
+      var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+    )
+  )));
+  padding-inline-end: calc(0.5 * (
     100vw - (var(--grid-padding-start) + (
       var(--grid-column-width) * var(--grid-column-count) +
       var(--grid-gutter-width) * (var(--grid-column-count) - 1)
     ))
-  );
+  ));
 }
 
 .grid-span-1 {
diff --git a/public/css/layout/grid.md.css b/public/css/layout/grid.md.css
new file mode 100644
index 0000000..5a681c1
--- /dev/null
+++ b/public/css/layout/grid.md.css
@@ -0,0 +1,14 @@
+:is(
+  header,
+  footer,
+  nav,
+  :is(main, article) > section:not(:is(section, header) :is(section, header))
+) {
+  padding-inline-start: var(--grid-padding-start);
+  padding-inline-end: calc(
+    100vw - (var(--grid-padding-start) + (
+      var(--grid-column-width) * var(--grid-column-count) +
+      var(--grid-gutter-width) * (var(--grid-column-count) - 1)
+    ))
+  );
+}
+\ No newline at end of file
diff --git a/public/css/layout/index.css b/public/css/layout/index.css
index 7c6196c..0d378e0 100644
--- a/public/css/layout/index.css
+++ b/public/css/layout/index.css
@@ -1,2 +1,3 @@
 @import './grid.css';
+@import './grid.md.css' (min-width: 48rem);
 @import './section-margins.css';
 \ No newline at end of file
diff --git a/public/css/layout/section-margins.css b/public/css/layout/section-margins.css
index 851f614..a11073f 100644
--- a/public/css/layout/section-margins.css
+++ b/public/css/layout/section-margins.css
@@ -1,14 +1,14 @@
 :is(main, article) > :is(section, header):not(:is(section, header) :is(section, header)) {
-    padding-block-start: var(--margin-block-lg);
-    padding-block-end: var(--margin-block-md);
-  }
-  
-  footer {
-    padding-block-start: var(--margin-block-md);
-    padding-block-end: var(--margin-block-lg);
-  }
-  
-  nav {
-    padding-block-start: var(--margin-block-sm);
-    padding-block-end: var(--margin-block-md);
-  }
-\ No newline at end of file
+  padding-block-start: var(--margin-block-lg);
+  padding-block-end: var(--margin-block-md);
+}
+
+footer {
+  padding-block-start: var(--margin-block-md);
+  padding-block-end: var(--margin-block-lg);
+}
+
+nav {
+  padding-block-start: var(--margin-block-sm);
+  padding-block-end: var(--margin-block-md);
+}
+\ No newline at end of file