Make bootstrap-v card responsive and CSS class based

_includes/components/cards/bootstrap-v.html

@@ -1,14 +1,16 @@
-<div class="card m-3" style="width: 15rem; height: 23rem">
-   <a href="{{ card.href }}" class="card-link px-3">
-     <img src="{{ site.amazon-s3 }}/assets/img/catalog/thumbnails/{{ card.img }}.png" class="card-img-top" alt="{{ card.title }}">
-   </a>
-  <div class="card-body">
-    <a href="{{ card.href }}" class="card-link">
-      <h5 class="card-title">{{ card.title }}</h5>
-    </a>
-    <p class="card-text small">{{ card.text }}</p>
-  </div>
-  <div class="card-body">
-    <a href="{{ card.href }}" class="card-link float-right pt-3">{{ card.button }}</a>
+<div class="col-6 col-md-4 col-lg-3">
+  <div class="card my-3">
+     <a href="{{ card.href }}" class="card-link px-3">
+       <img src="{{ site.amazon-s3 }}/assets/img/catalog/thumbnails/{{ card.img }}.png" class="card-img-top" alt="{{ card.title }}">
+     </a>
+    <div class="card-body">
+      <a href="{{ card.href }}" class="card-link">
+        <h5 class="card-title">{{ card.title }}</h5>
+      </a>
+      <p class="card-text small line-clamp-2">{{ card.text }}</p>
+    </div>
+    <div class="card-body">
+      <a href="{{ card.href }}" class="card-link float-right pt-3">{{ card.button }}</a>
+    </div>
   </div>
 </div>

_sass/common/_common.scss

@@ -1,3 +1,12 @@
+.line-clamp-2 {
+  height: 28px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
 .marketing-theme{
   &.red{
     color:red;

_sass/components/product-cards/_progressive.scss

@@ -17,15 +17,6 @@
     }
   }
 
-  .line-clamp-2 {
-    height: 28px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-  }
-
   .text-sm {
     font-size: 0.9rem;
   }