front page spacing cleanup, ref #4

assets/less/ascribe.less

@@ -483,7 +483,11 @@ header + .chevron-divider {
     }
 }
 .feature-circles {
-    padding: 75px 0 160px;
+    padding: @spacer 0;
+
+    @media (min-width: @tabletWidth) {
+        padding: (@spacer * 2) 0;
+    }
 
     .column-container {
         width: calc(~"100% + 100px");
@@ -491,6 +495,15 @@ header + .chevron-divider {
     .feature-circle {
         .ttl-columns.column-3;
         padding-right: 100px;
+        margin-bottom: @spacer;
+
+        &:last-child { margin-bottom: 0 }
+
+        @media (min-width: @tabletWidth) {
+            &:nth-last-child(1),
+            &:nth-last-child(2),
+            &:nth-last-child(3) { margin-bottom: 0 }
+        }
     }
     .surround-circle {
         width: 33%;
@@ -556,6 +569,8 @@ header + .chevron-divider {
     }
     .description {
         .copyTextSmall;
+
+        p { margin-bottom: 0; }
     }
 
     @media screen and (max-width: 900px) {
@@ -865,40 +880,29 @@ header + .chevron-divider {
         }
     }
 }
+
 .blue-box {
-    padding: 175px 0;
+    padding: @spacer 0;
     background-color: @greyBg;
     .blueBoxCopy;
     text-align: center;
 
+    @media (min-width: @tabletWidth) {
+        padding: (@spacer * 2) 0;
+    }
+
     .blue-copy {
         background-color: @blueBright;
-        padding: 70px 0 110px;
+        text-align: center;
+        padding: @spacer;
 
-        div {
+        @media (min-width: @tabletWidth) {
-            width: 80%;
+            padding: (@spacer * 2);
-            margin: 0 auto;
-            text-align: center;
         }
-    }
-    h1 {
-        .blueBoxTitle;
-    }
 
-    @media screen and (max-width: @tabletWidth) {
-        padding: 75px 0;
-    }
-    @media screen and (max-width: @phoneWidth) {
         h1 {
-            font-size: 30px;
+            .blueBoxTitle;
-        }
+            margin-top: 0;
-        .blue-copy {
-            padding: 40px 0 60px;
-            font-size: 24px;
-
-            div {
-                line-height: 31px;
-            }
         }
     }
 }
@@ -908,8 +912,7 @@ header + .chevron-divider {
 // Component: CTA section
 //
 .cta {
-    // TODO: this padding value should come from more general component like .section or global variable
+    padding: @spacer 0;
-    padding: 20px 0;
     min-height: 300px;
     text-align: center;
     background-size: cover;
@@ -921,8 +924,8 @@ header + .chevron-divider {
     align-items: center;
     justify-content: center;
 
-    @media screen and (min-width: @phoneWidth) {
+    @media (min-width: @phoneWidth) {
-        padding: 40px 0;
+        padding: (@spacer * 2) 0;
         min-height: 520px;
         background-position: center;
     }
@@ -943,14 +946,12 @@ header + .chevron-divider {
     .cta__button {
         margin: 0 auto;
     }
-
-
 }
 
 
 
 .galleries-marketplaces {
-    padding: 145px 0 130px;
+    padding: @spacer 0;
     text-align: center;
 
     h1 {
@@ -958,11 +959,10 @@ header + .chevron-divider {
     }
     img {
         display:block;
-        margin-bottom: 80px;
     }
 
-    @media screen and (max-width: @tabletWidth) {
+    @media (min-width: @tabletWidth) {
-        padding: 75px 0 30px;
+        padding: (@spacer * 2) 0;
 
         h1 {
             font-size: 27px;

assets/less/ascribe/_branding.less

@@ -148,19 +148,30 @@ a {
     color: @pink;
     line-height: 29px;
 }
+
 .blueBoxTitle {
     &:extend(.fontRegular);
-    font-size: 43px;
+    font-size: 30px;
     color: @white;
     line-height: 52px;
     text-align: center;
+
+    @media (min-width: @phoneWidth) {
+        font-size: 43px;
+    }
 }
 .blueBoxCopy {
     &:extend(.fontLight);
-    font-size: 43px;
+    font-size: 24px;
+    line-height: 31px;
     color: @white;
-    line-height: 52px;
+
+    @media (min-width: @phoneWidth) {
+        font-size: 43px;
+        line-height: 52px;
+    }
 }
+
 .galleriesPressTitle {
     &:extend(.fontLight);
     font-size: 30px;

assets/less/ascribe/_variables.less

@@ -19,3 +19,7 @@
 @greyText: #595959;
 @blackish: #1e1e1e;
 @black: #000;
+
+
+// SPACING
+@spacer:    40px;