updates feature-card to use non-fixed heights by leveraging an aspect ratio mixin

wherehows-web/app/styles/abstracts/_mixins.scss

@@ -98,3 +98,26 @@
 
   #{$property}: $value;
 }
+
+
+/// Maintains the aspect ratio for a wrapped element
+/// @param {Number} $width number value for the container's width ratio
+/// @param {Number} $height number value for the container's with ratio
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 100%;
+    padding-top: ($height / $width) * 100%;
+  }
+
+  > * {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+  }
+}

wherehows-web/app/styles/components/feature-card/_feature-card.scss

@@ -1,5 +1,4 @@
 .feature-card {
-  height: 160px;
   border-radius: 2px;
   margin: 30px 0;
   padding: 10px;
@@ -16,3 +15,8 @@
     color: set-color(black, dune);
   }
 }
+
+/// Wrap cards in containers with 1:1 ar
+.feature-container {
+  @include aspect-ratio(1, 1);
+}

wherehows-web/app/templates/index.hbs

@@ -1,6 +1,9 @@
+<div class="row">
+  <div class="container">
     <div class="row">
       {{#each model as |featureCard|}}
-    <div class="col-sm-3">
+        <div class="col-md-3">
+          <div class="feature-container">
             <article class="feature-card">
               {{#link-to featureCard.route}}
                 <span class="feature-card-icon" title={{featureCard.title}}></span>
@@ -11,5 +14,8 @@
               {{/link-to}}
             </article>
           </div>
+        </div>
       {{/each}}
     </div>
+  </div>
+</div>