Fixes How it works ribbon

_sass/_grid.scss

@@ -31,6 +31,8 @@ $massive-up: new-breakpoint(min-width $massive);
     @media only screen and (min-width: $tiny) { @content; }
   } @else if $media == tiny-to-small {
     @media only screen and (min-width: $tiny) and (max-width: $small) { @content; }
+  } @else if $media == tiny-to-medium {
+    @media only screen and (min-width: $tiny) and (max-width: $medium) { @content; }
   } @else if $media == small-down {
     @media only screen and (max-width: $small) { @content; }
   } @else if $media == small-up {

_sass/components/_ribbon.scss

@@ -73,6 +73,41 @@
   padding-right: $base-padding;
   padding-top: 0;
   text-align: center;
+
+  &.ribbon-card-top-text {
+    display: flex;
+    flex-direction: column;
+
+    @include respond-to(small-to-huge) {
+      flex-direction: row;
+      justify-content: space-around;
+
+      > *:not(a) {
+        align-self: flex-start;
+        text-align: left;
+        width: 50%;
+      }
+
+      a {
+        text-align: center;
+      }
+
+      h2 {
+        @include heading('para-lg');
+        font-weight: $weight-bold;
+      }
+    }
+
+    > * {
+      align-self: center;
+      margin-bottom: $base-padding;
+      text-align: center;
+    }
+
+    h2 {
+      align-self: center;
+    }
+  }
 }
 
 .ribbon-card-top-text-header {
@@ -107,6 +142,11 @@
 .ribbon-card-bottom {
   @include heading('para-sm');
 
+  @include respond-to(medium-down) {
+    @include heading('para-md');
+    margin-bottom: 0;
+  }
+
   background-color: $gray-light;
   color: $dark-gray;
   font-weight: $weight-book;
@@ -134,16 +174,21 @@
 
 .ribbon {
   svg {
-    float: left;
     width: 100%;
+
+    @include respond-to(large-up) {
+      float: left;
+      width: 100%;
+    }
   }
 
   .ribbon-card {
-    padding-top: $base-padding-large;
     position: relative;
 
     &.ribbon-card-home {
-      padding-top: $base-padding-extra;
+      @include respond-to(tiny-down) {
+        padding-top: $base-padding-extra;
+      }
     }
   }
 
@@ -156,6 +201,10 @@
     &.ribbon-hero-home {
       padding-bottom: $base-padding-jumbo;
       padding-top: $base-padding-extra;
+
+      @include respond-to(tiny-to-medium) {
+        padding-bottom: 0;
+      }
     }
 
     &.ribbon-hero-column {
@@ -200,12 +249,13 @@ svg {
     }
 
     .ribbon-card {
-      padding-top: 0;
       position: relative;
     }
 
     .svg-oil-rig {
       display: none;
+      float: left;
+      width: 100%;
 
       .rig-dollars {
         display: inline-block;
@@ -256,24 +306,11 @@ svg {
   }
 }
 
-@include respond-to(tiny-to-small) {
-  .ribbon-card-top.ribbon-card-top-text > * {
-    margin-left: 10%;
-    margin-right: 10%;
-  }
-}
-
-
 @include respond-to(small-to-huge) {
   .ribbon .ribbon-hero,
   .ribbon-card-top {
     padding-left: $page-padding;
     padding-right: $page-padding;
-
-    &.ribbon-card-top-text > * {
-      margin-left: 20%;
-      margin-right: 20%;
-    }
   }
 }
 

pages/about.html

@@ -13,12 +13,14 @@ <h1>{{ page.title }}</h1>
 		</div>
 		<div class="container-right-4 ribbon-card-column ribbon-card">
       <div class="ribbon-card-top ribbon-card-top-text">
-        <h2 class="ribbon-card-top-text-header">The 2016 USEITI report is now available, and includes:</h2>
-        <ul class="list-bullet ribbon-card-top-list">
-          <li>New contextual information</li>
-          <li>New regional profile pages</li>
-          <li>More granular disbursements data</li>
-        </ul>
+        <div>
+          <h2 class="ribbon-card-top-text-header">The 2016 USEITI report is now available, and includes:</h2>
+          <ul class="list-bullet ribbon-card-top-list">
+            <li>New contextual information</li>
+            <li>New regional profile pages</li>
+            <li>More granular disbursements data</li>
+          </ul>
+        </div>
         <a href="{{ site.baseurl }}/about/whats-new/" class="ribbon-card-button button-primary">See what's new</a>
       </div>
       <div class="ribbon-card-bottom">