Change box category view to use flexbox

app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@@ -1,11 +1,13 @@
 {{#each categories as |c|}}
   <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}>
     <div class='category-box-inner'>
-      <div class='category-box-heading'>
+      <div class="category-logo">
         {{#if c.uploaded_logo.url}}
           {{cdn-img src=c.uploaded_logo.url class="logo"}}
         {{/if}}
-
+      </div>
+      <div class="category-details">
+        <div class='category-box-heading'>
           <h3>
             {{#if c.read_restricted}}
               {{d-icon 'lock'}}
@@ -32,4 +34,5 @@
         {{/if}}
       </div>
     </div>
+  </div>
 {{/each}}

app/assets/stylesheets/common/base/category-list.scss

@@ -55,6 +55,8 @@
   .category-box-inner {
     width: 100%;
     padding: 0;
+    display: flex;
+    flex-direction: column;
 
     border-width: 2px;
     border-left-width: 0;
@@ -78,6 +80,14 @@
       width: 100%;
       padding: 0;
     }
+    .category-box-inner {
+      padding: 1em;
+
+      .category-logo {
+        float: none;
+        margin: 0;
+      }
+    }
   }
 
   &.no-logos {
@@ -86,12 +96,8 @@
     }
   }
 
-  .category-box-heading {
-    padding: 1em 1em 0 1em;
-  }
-
   .description {
-    padding: 0 1em 1em 1em;
+    padding-bottom: 1em;
     text-align: center;
     font-size: $font-0;
     color: dark-light-choose($primary-medium, $secondary-high);
@@ -114,7 +120,6 @@
   }
 
   .subcategories {
-    margin-left: 1em;
     display: flex;
     flex-flow: wrap;
     .subcategory {
@@ -127,8 +132,6 @@
       margin-bottom: 0.6em;
       .subcategory-image-placeholder {
         display: inline-block;
-        width: 20px;
-        height: 20px;
         margin-right: 0.6em;
       }
       .logo {