Design: Less vertical padding for containers on mobile

2 files changed, 6 insertions, 0 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index 24a94fa..b023ffe 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -12,6 +12,7 @@ $subcontent--indent: 4ch;
 $container--pad-h: 2rem;
 $container--pad-h-sm: 1rem;
 $container--pad-v: $line-height * 2rem;
+$container--pad-v-sm: $line-height * 1rem;
 
 $nav--font-size: $font-size - 1;
 $nav--item--spacing: 4ch;
diff --git a/assets/css/layouts/_container.scss b/assets/css/layouts/_container.scss
index ec061c6..f0544f7 100644
--- a/assets/css/layouts/_container.scss
+++ b/assets/css/layouts/_container.scss
@@ -16,5 +16,10 @@
     @media (max-width: map-get($breakpoints, 'sm')) {
         padding-right: $container--pad-h-sm;
         padding-left: $container--pad-h-sm;
+
+        &--pad-v {
+            padding-top: $container--pad-v-sm;
+            padding-bottom: $container--pad-v-sm;
+        }
     }
 }