Better image styling on homepage

src/style/5-screens/_home.scss

@@ -2,15 +2,32 @@
 
 .feature {
   margin: $content-padding * 4 0;
+  align-items: center;
+  @media screen and (min-width: $desktop-width) {
+    display: flex;
+  }
   &:not(:last-child) {
     margin-bottom: $content-separator-width;
   }
+  .content {
+    flex: 1;
+  }
   .image {
+    flex: 0.6;
     padding: $content-padding;
+    @media screen and (min-width: $desktop-width) {
+      padding: $content-padding * 2;
+    }
   }
   img {
+    margin: 0 auto;
+    display: block;
+    max-height: 25em;
     max-width: 100%;
   }
+  a {
+    font-size: 1.3em;
+  }
 
 }
 

src/views/Home.vue

@@ -30,8 +30,8 @@
     </div>
     <div class="row" id="learn-more">
       <section class="wide">
-        <div class="feature pure-g">
-          <div class="content pure-u-1 pure-u-md-2-3">
+        <div class="feature">
+          <div class="content">
             <h3>
               <translate
                 translate-context="Content/Home.Feature/Header"
@@ -56,12 +56,12 @@
               <translate translate-context="Content/Home/Button.Label">Get started</translate>
             </a>
           </div>
-          <div class="image pure-u-1 pure-u-md-1-3">
+          <div class="image">
             <img class="strong" src="../assets/home/dsub.jpg">
           </div>
         </div>
-        <div class="feature pure-g">
-          <div class="content pure-u-1 pure-u-md-2-3">
+        <div class="feature">
+          <div class="content">
             <h3>
               <translate
                 translate-context="Content/Home.Feature/Header"
@@ -89,12 +89,12 @@
               <translate translate-context="Content/Home/*">Find or start your pod</translate>
             </a>
           </div>
-          <div class="image pure-u-1 pure-u-md-1-3">
+          <div class="image">
             <img class="strong" src="https://placekitten.com/g/350/350">
           </div>
         </div>
-        <div class="feature pure-g">
-          <div class="content pure-u-1 pure-u-md-2-3">
+        <div class="feature">
+          <div class="content">
             <h3>
               <translate translate-context="Content/Home.Feature/Header">Made by people, for people</translate>
             </h3>
@@ -116,8 +116,8 @@
               <translate translate-context="Content/Home.Feature/Link">Discover our community</translate>
             </router-link>
           </div>
-          <div class="image pure-u-1 pure-u-md-1-3">
-            <img class="strong" src="https://placekitten.com/g/370/370">
+          <div class="image">
+            <img class="strong" src="https://placekitten.com/g/670/470">
           </div>
         </div>
       </section>