chore: Update modulate.css grid container styling and section spacing

Author: arinker

src/modulate.css

@@ -577,8 +577,6 @@
             calc(var(--grid-padding) * 1px)
             [screen-end];
 
-        scroll-margin-top: calc(var(--header-height) + var(--anchor-space));
-
         /* ----------------------------------------------------------------------------------------
             Background
         */
@@ -591,114 +589,20 @@
             background: var(--cs-background);
             content: "";
             position: relative;
-            grid-column: 1 / -1;
-            grid-row: 2 / -2;
+            grid-column: screen-start / screen-end;
+            grid-row: frame-start / frame-end;
             z-index: 1;
         }
 
-        &.start::after {
-            grid-column: 1 / -2;
-        }
-        &.end::after {
-            grid-column: 2 / -1;
-        }
         &.framed::after {
-            grid-column: 3 / -3;
-        }
-        &.framed.start::after {
-            grid-column: 1 / -3;
-        }
-        &.framed.end::after {
-            grid-column: 3 / -1;
+            grid-column: frame-start / frame-end;
         }
 
         & > * {
             z-index: 2;
         }
 
-        /* ----------------------------------------------------------------------------------------
-            Section Spacing
-        */
-
-        /* Section Padding Top */
-        &.ps-xs {
-            --section-padding-block-start: var(--spacing-xs);
-        }
-        &.ps-sm {
-            --section-padding-block-start: var(--spacing-sm);
-        }
-        &.ps-md {
-            --section-padding-block-start: var(--spacing-md);
-        }
-        &.ps-lg {
-            --section-padding-block-start: var(--spacing-lg);
-        }
-        &.ps-xl {
-            --section-padding-block-start: var(--spacing-xl);
-        }
-        &.ps-2xl {
-            --section-padding-block-start: var(--spacing-2xl);
-        }
-
-        /* Section Padding Bottom */
-        &.pe-xs {
-            --section-padding-block-end: var(--spacing-xs);
-        }
-        &.pe-sm {
-            --section-padding-block-end: var(--spacing-sm);
-        }
-        &.pe-md {
-            --section-padding-block-end: var(--spacing-md);
-        }
-        &.pe-lg {
-            --section-padding-block-end: var(--spacing-lg);
-        }
-        &.pe-xl {
-            --section-padding-block-end: var(--spacing-xl);
-        }
-        &.pe-2xl {
-            --section-padding-block-end: var(--spacing-2xl);
-        }
-
-        /* Section Padding Bottom */
-        &.ms-xs {
-            --section-margin-block-start: var(--spacing-xs);
-        }
-        &.ms-sm {
-            --section-margin-block-start: var(--spacing-sm);
-        }
-        &.ms-md {
-            --section-margin-block-start: var(--spacing-md);
-        }
-        &.ms-lg {
-            --section-margin-block-start: var(--spacing-lg);
-        }
-        &.ms-xl {
-            --section-margin-block-start: var(--spacing-xl);
-        }
-        &.ms-2xl {
-            --section-margin-block-start: var(--spacing-2xl);
-        }
-
-        /* Section Margin Bottom */
-        &.me-xs {
-            --section-margin-block-end: var(--spacing-xs);
-        }
-        &.me-sm {
-            --section-margin-block-end: var(--spacing-sm);
-        }
-        &.me-md {
-            --section-margin-block-end: var(--spacing-md);
-        }
-        &.me-lg {
-            --section-margin-block-end: var(--spacing-lg);
-        }
-        &.me-xl {
-            --section-margin-block-end: var(--spacing-xl);
-        }
-        &.me-2xl {
-            --section-margin-block-end: var(--spacing-2xl);
-        }
+        scroll-margin-top: calc(var(--header-height) + var(--anchor-space));
     }
 
     /* ----------------------------------------------------------------------------------------