1 files changed, 29 insertions, 18 deletions

diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index e99c62f..2bb4d80 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -1,25 +1,36 @@
-.l-container {
-    padding-right: $container--pad-h;
-    padding-left: $container--pad-h;
+@include namespace('container') {
+    @include store((
+        --dims: (
+            --pad-x: 2rem,
+            --pad-x-sm: 1rem,
+            --pad-y: $line-height * 2rem,
+            --pad-y-sm: $line-height * 1rem
+        )
+    ));
 
-    &--content {
-        max-width: $content--width;
-        margin-right: auto;
-        margin-left: auto;
-    }
+    @include layout(namespace()) {
+        padding-right: prop(--dims --pad-x);
+        padding-left: prop(--dims --pad-x);
 
-    &--pad-v {
-        padding-top: $container--pad-v;
-        padding-bottom: $container--pad-v;
-    }
+        @include modifier('content') {
+            max-width: $content--width;
+            margin-right: auto;
+            margin-left: auto;
+        }
+
+        @include modifier('pad-v') {
+            padding-top: prop(--dims --pad-y);
+            padding-bottom: prop(--dims --pad-y);
+        }
 
-    @media (max-width: map-get($breakpoints, 'sm')) {
-        padding-right: $container--pad-h--sm;
-        padding-left: $container--pad-h--sm;
+        @include media('<=sm') {
+            padding-right: prop(--dims --pad-x-sm);
+            padding-left: prop(--dims --pad-x-sm);
 
-        &--pad-v {
-            padding-top: $container--pad-v--sm;
-            padding-bottom: $container--pad-v--sm;
+            @include modifier('pad-v') {
+                padding-top: prop(--dims --pad-y-sm);
+                padding-bottom: prop(--dims --pad-y-sm);
+            }
         }
     }
 }