Fix formatting issues on browse page

src/jade/templates/mod.jade

@@ -7,6 +7,8 @@
 
 .view__mod
     a
-        img.logo
-        h3.name: p
-        .description: p
+        .left
+            img.logo
+        .right
+            h3.name: p
+            .description: p

src/scss/templates/browse_page.scss

@@ -6,9 +6,17 @@ All rights reserved.
 */
 
 .view__browse_page {
+    .mods {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: stretch;
 
-    .view__mod {
-        margin: 0 1em 1em 0;
-        width: 37em;
+        .view__mod {
+            flex: 1 1 100%;
+            flex-wrap: nowrap;
+
+            margin: 0 1em 1em 0;
+            max-width: calc(50% - 1em);
+        }
     }
 }

src/scss/templates/mod.scss

@@ -6,53 +6,43 @@ All rights reserved.
 */
 
 .view__mod {
-    position: relative; height: 18em;
+    a {
+        background: $color-background-panel;
+        color: $color-text;
+        display: flex;
+        min-height: 16em;
+        padding: 1.2em;
+        text-decoration: none;
 
-    background: $color-background-panel;
-    display: inline-block;
-    padding: 0.2em;
-    text-decoration: none;
-    vertical-align: top;
+        &:hover {
+            border: 0.2em solid $color-link;
+            padding: 1.0em;
 
-    transition:
-        height $animate-normal,
-        opacity $animate-normal;
+            h3 {
+                color: $color-link;
+                text-decoration: underline;
+            }
+        }
 
-    &:hover {
-        border: 0.2em solid $color-link;
-        padding: 0;
+        .left {
+            flex: 0 0 33%;
+            padding: 0.5em;
 
-        .name {
-            color: $color-link;
-            text-decoration: underline;
+            img {
+                max-width: calc(100% - 1.0em);
+            }
+        }
+
+        .right {
+            flex: 1 1 66%;
+
+            h3 {
+                font-size: $font-size-normal;
+            }
+
+            .description {
+                margin-top: 1em;
+            }
         }
     }
-
-    &.empty {
-        height: 0;
-    }
-
-    &.removing {
-        height: 0;
-        opacity: 0;
-    }
-
-    .description {
-        margin: 1em;
-    }
-
-    a {
-        color: $color-text;
-        text-decoration: none;
-    }
-
-    h3 {
-        font-size: $font-size-normal;
-        margin-top: 1em;
-    }
-
-    img {
-        float: left;
-        margin: 1em;
-    }
 }