page cleanup

site/assets/scss/components/_fifty.scss

@@ -2,14 +2,24 @@
   display: flex;
   flex-wrap: wrap;
 
-  > * { flex: 1 1 auto; }
-
-  @media screen and (min-width: 425px) {
-    > * { width: 50%; }
+  > * {
+    flex: 1 1 auto;
+    margin: $gutter 0;
   }
 
   @media screen and (min-width: 768px) {
     flex-wrap: nowrap;
-  }
 
+    > * {
+      margin: 0 $gutter;
+    }
+
+    &.fifty-reversed {
+      > * {
+        &:first-of-type { order: 2;}
+        &:last-of-type { order: 0;}
+      }
+    }
+
+  }
 }

site/assets/scss/components/_pie.scss

@@ -6,16 +6,17 @@
   padding: $gutter;
 
   .key {
+    flex: 1 1 auto;
     margin-left: calc(#{$gutter} + 1em);
 
     div {
       position: relative;
+      margin-bottom: 0.6em;
       padding-left: 0.33em;
-      line-height: 1.4em;
 
       &::before {
         position: absolute;
-        bottom: 0.2em;
+        top: 0.1em;
         left: -1em;
         width: 1em;
         height: 1em;
@@ -34,6 +35,7 @@
   ul {
     @include slim-ul;
     position: relative;
+    flex: 0 0 auto;
     margin: 0;
     width: 100px;
     height: 100px;