Fix layout

themes/starter/layout/_partial/featured.ejs

@@ -8,7 +8,10 @@
     <h4><%- __('featured') %></h4>
   </div>
   <a href="<%- post.url %>" class="post__preview featured">
-    <img src="/<%- post.path %><%- post.banner%>" alt="featured post image">
+    <div class="post__image">
+      <img src="/<%- post.path %><%- post.banner%>" alt="featured post image">
+    </div>
+
     <div class="post__content">
       <p class="post__title u-emphasize u-center">
         <%- post.title %>

themes/starter/source/assets/scss/modules/_chronicles.scss

@@ -90,7 +90,6 @@
   border: none;
   display: flex;
   justify-content: space-between;
-  flex-wrap: wrap;
   margin: 4em 0;
   max-height: 300px;
     &:hover,
@@ -106,16 +105,16 @@
 }
 
 
-.post__preview.featured > img,
+.post__preview.featured > .post__image,
 .post__preview.featured .post__content {
   flex: 48% 0 0;
 }
 
-.post__preview.featured > img {
+.post__preview.featured img {
   border-radius: 10px;
+  height: 220px;
 }
 
-
 .post__preview.featured .post__content {
   display: flex;
   flex-direction: column;
@@ -191,6 +190,18 @@ $taglist: (diaspora, $diaspora),
   .post__preview:not(.wanted):not(.featured) {
     flex: 46% 0 0;
   }
+
+  .post__preview.featured {
+    flex-wrap: wrap;
+    max-height: inherit;
+    margin: 1.5em 0;
+  }
+
+  .post__preview.featured > .post__image,
+  .post__preview.featured .post__content {
+    flex: 100% 0 0;
+    margin-bottom: 2em
+  };
 }
 
 @media screen and (max-width: $mq-medium) {
@@ -200,17 +211,6 @@ $taglist: (diaspora, $diaspora),
     margin: -90px auto 3em;
   }
 
-  .post__preview.featured {
-    max-height: inherit;
-    margin: 1.5em 0;
-  }
-
-  .post__preview.featured > img,
-  .post__preview.featured .post__content {
-    flex: 100% 0 0;
-    margin-bottom: 2em;
-  }
-
   .post__preview:not(.wanted):not(.featured) {
     flex: 100% 0 0;
     height: 200px;