Add mobile responsive support

4 files changed, 13 insertions, 8 deletions

diff --git a/src/comparison-sliders.less b/src/comparison-sliders.less
index 083ce26..caefd5a 100644
--- a/src/comparison-sliders.less
+++ b/src/comparison-sliders.less
@@ -18,7 +18,7 @@
     img {
       height: 100%;
       object-fit: none;
-      object-position: left top;
+      object-position: left center;
       position: absolute;
       width: 100%;
     }
diff --git a/src/layout.less b/src/layout.less
index 0f7bdfe..46e422b 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -44,7 +44,8 @@
 .column {
   flex: 1;
   max-width: 100%;
-  padding: @layout-spacing;
+  padding-left: @layout-spacing;
+  padding-right: @layout-spacing;
 
   &.col-12,
   &.col-11,
diff --git a/src/parallax.less b/src/parallax.less
index beca542..69dfe1f 100644
--- a/src/parallax.less
+++ b/src/parallax.less
@@ -39,7 +39,7 @@
     left: 0;
     position: absolute;
     text-align: center;
-    text-shadow: 0 0 4px fade(@dark-color, 95%);
+    text-shadow: 0 0 20px fade(@dark-color, 50%);
     top: 0;
     transform: translateZ(@parallax-offset-z) scale(@parallax-scale);
     transition: all .4s ease;
diff --git a/src/utilities/divider.less b/src/utilities/divider.less
index f59d0ea..a5cb45b 100644
--- a/src/utilities/divider.less
+++ b/src/utilities/divider.less
@@ -6,7 +6,7 @@
 
   &[data-content]::after {
     background: @bg-color-light;
-    color: @gray-color-light;
+    color: @gray-color;
     content: attr(data-content);
     display: inline-block;
     font-size: @font-size-sm;
@@ -18,21 +18,25 @@
 .divider {
   border-top: @border-width solid @border-color;
   height: @border-width;
-  margin: @layout-spacing 0;
+  margin: @unit-2 0;
+
+  &[data-content] {
+    margin: @unit-4 0;
+  }
 }
 
 .divider-vert {
   display: block;
-  padding: @layout-spacing;
+  padding: @unit-4;
 
   &::before {
     border-left: @border-width solid @border-color;
-    bottom: @layout-spacing;
+    bottom: @unit-2;
     content: "";
     display: block;
     left: 50%;
     position: absolute;
-    top: @layout-spacing;
+    top: @unit-2;
     transform: translateX(-50%);
   }