Modifying separated inline list styles to wrap neatly

The "//" separator is hidden when the list items wrap.

src/components/Footer/style.css

@@ -11,7 +11,7 @@ footer {
 
   & ul {
     @apply --inline-list;
-    @apply --with-separator;
+    @apply --with-separator-left;
     flex: 1;
   }
 

src/components/Form/style.css

@@ -50,12 +50,14 @@
 
   @media (min-width: 700px) {
     @apply --inline-list;
-    @apply --with-separator;
+    @apply --with-separator-left;
     float: right;
   }
 
   & svg {
+    width: 1em;
     height: 1em;
+    margin-right: 0.5rem;
     vertical-align: middle;
   }
 }

src/components/Header/style.css

@@ -44,11 +44,12 @@
 
   & ul {
     @apply --inline-list;
+    @apply --with-separator-right;
     text-align: right;
   }
 
   & li {
-    margin-left: 1em;
+    line-height: 2.4rem;
 
     & a:hover,
     & a:active {