Mobile styles.

Author: wbobeirne

frontend/src/pages/About.less

@@ -1,3 +1,5 @@
+@import '../style/variables.less';
+
 .About {
   max-width: 780px;
   margin: 0 auto;
@@ -8,6 +10,10 @@
     padding-bottom: 5rem;
     border-bottom: 1px solid rgba(#000, 0.1);
 
+    @media @md-query {
+      flex-direction: column;
+    }
+
     &:last-child {
       border: none;
     }
@@ -21,6 +27,13 @@
       text-align: right;
       padding-right: 5rem;
       opacity: 0.5;
+
+      @media @md-query {
+        width: auto;
+        padding-right: 0;
+        padding-bottom: 2rem;
+        text-align: center;
+      }
     }
 
     &-content {
@@ -33,6 +46,11 @@
         margin-left: -15rem;
         display: flex;
         z-index: 1;
+
+        @media @md-query {
+          margin: 0;
+          flex-direction: column;
+        }
       }
     }
   }
@@ -47,6 +65,10 @@
   flex: 1;
   padding: 1rem;
 
+  @media @md-query {
+    margin-bottom: 2rem;
+  }
+
   &-image {
     width: 12rem;
     height: 12rem;
@@ -61,6 +83,7 @@
 
   &-blurb {
     font-size: 1.2rem;
+    line-height: 1.4;
     opacity: 0.7;
     margin-bottom: 1rem;
     min-height: 70px;