switch feature assets

_src/_assets/scss/page-front.scss

@@ -17,14 +17,17 @@
 }
 
 .feature__image {
-    margin: 0;
+    margin: 0 auto;
     background: $brand-05;
     border-radius: $border-radius;
-    min-height: 9rem;
-    display: flex;
-    align-items: flex-end;
+    overflow: hidden;
+    max-width: 400px;
 
-    svg {
+    @media ($screen-sm) {
+        margin: 0;
+    }
+
+    img {
         width: 100%;
         height: auto;
         max-width: 100%;

_src/_data/content-front.yml

@@ -11,22 +11,22 @@ intro:
     features:
         - title: "A single public database"
           text: "IPDB gives you easy access to a single public, decentralized database with added blockchain characteristics—all built on top of open source BigchainDB."
-          image: feature-01.png
+          image: feature-01
         - title: "No installation required—just sign up and go"
           text: "All you have to do is sign up to start using IPDB. IPDB Caretakers will handle running a BigchainDB network for you."
-          image: feature-02.png
+          image: feature-02
         - title: "Store any data, permanently"
           text: "IPDB allows you to store data indefinitely. It provides blockchain-style tamper-resistance and database-style queryability to give you the best of both worlds."
-          image: feature-03.png
+          image: feature-03
         - title: "Predictable pricing"
           text: "Use of IPDB is not based on a cryptocurrency, so you don’t have to worry about a spike in the price making it too expensive to run your application. Usage of IPDB during the test net phase is free of charge."
-          image: feature-04.png
+          image: feature-04
         - title: "Governed by Caretakers"
           text: "The IPDB Foundation is run by its internet-loving Caretakers around the world."
-          image: feature-05.png
+          image: feature-05
         - title: "A Dashboard for your IPDB apps"
           text: "Manage your apps, give users access, and get statistical insights about your app’s API usage."
-          image: feature-06.png
+          image: feature-06
           list:
               - API usage statistics
               - Access control

_src/index.html

@@ -76,11 +76,7 @@ css: page-front
                 <div class="grid grid--full grid-small--half grid-medium--columns grid--center grid--gutters">
                     <div class="grid__col grid__col--2">
                         <figure class="feature__image">
-                            <!-- <svg aria-labelledby="title">
-                                <title>{{ feature.title }}</title>
-                                <use xlink:href="/assets/img/sprite.svg#{{ feature.image }}"></use>
-                            </svg> -->
-                            <img src="/assets/img/{{ feature.image }}" alt="">
+                            <img src="/assets/img/{{ feature.image }}.jpg" srcset="/assets/img/{{ feature.image }}.jpg 1x, /assets/img/{{ feature.image }}@2x.jpg 2x" alt="{{ feature.title }}" width="400">
                         </figure>
                     </div>