add learn

components/content/content-learn.html

@@ -1,3 +1,4 @@
+
 <div class="component-content">
   <div class="container">
 

components/content/content.scss

@@ -2,33 +2,36 @@
 @import "../../src/scss/mixins.scss";
 
 .component-content {
-  padding-top: $header-height-mobile + 150px;
+  padding-top: $header-height-mobile+60px;
 
   .title {
-    @include font-style($font-serif, 'regular', $font-52);
+    display: block;
+    @include font-style($font-serif, 'regular', $font-46);
+    line-height: $font-40;
     color: $olive-dark;
-    padding: 30px 0;
-    margin: 0;
+    padding: 0;
+    margin: 30px 0 20px 0;
   }
 
   .paragraph {
     @include font-style($font-sans, 'regular', $font-22);
     color: $gray;
-    padding: 30px 0;
-    margin: 0;
+    padding: 0;
+    margin: 0 0 30px 0;
   }
 
   .blockquote {
     @include font-style($font-serif, 'regular-italic', $font-30);
     color: $gray;
-    padding: 50px 0;
-    margin: 0;
+    padding: 0;
+    margin: 0 0 50px 0;
     text-align: center;
   }
 
   .image {
     width: 100%;
-    padding: 30px 0;
+    padding: 0;
+    margin: 0 0 30px 0;
   }
 }
 
@@ -36,6 +39,6 @@
 
 @media (min-width: map-get($grid-breakpoints, 'md')) {
   .component-content {
-    padding-top: $header-height + 150px;
+    padding-top: $header-height+60px;
   }
 }

pages/learn.ejs

@@ -1 +1 @@
-${require('../components/content/content-learn.html')}
+${require('../components/content/content.html')}