responsive masonry in view mode

src/assets/js/js.js

@@ -44,7 +44,7 @@ jQuery(document).ready(function( $ ) {
                     percentPosition: true,
                     itemSelector: '.grid-item',
                     columnWidth: '.grid-sizer',
-                    gutter: '.gutter-sizer',
+                    //gutter: '.gutter-sizer',
                     horizontalOrder: true,
                 });
             }

src/assets/scss/_view-mode-masonry.scss

@@ -1,6 +1,6 @@
 .tainacan-masonry-view {
     min-height: 200px;
-    margin: 1.5em 0;
+    /* margin: 1.5em 0;
     padding: 0;
     -moz-column-gap: 1.5em;
     -webkit-column-gap: 1.5em;
@@ -20,9 +20,7 @@
         .card{
             border: none;
             img{
-                width: 100%;
-                height: auto;
             }
         }
-    }
+    } */
 }

src/tainacan/view-mode-masonry.php

@@ -1,15 +1,15 @@
 <div class="container">
     <?php if (have_posts()):  ?>
         <div class="clearfix tainacan-masonry-view">
-            <div class="grid-sizer"></div>
+            <div class="grid-sizer col col-sm-6 col-md-4 col-lg-3"></div>
             <div class="gutter-sizer"></div>
         <!-- <div class="tainacan-masonry-container card-columns p-3"> -->
             <?php while (have_posts()): the_post(); ?>
-                <div class="grid-item">
+                <div class="grid-item col col-sm-6 col-md-4 col-lg-3 mb-3">
                     <div class="card">
                         <?php 
                             if(has_post_thumbnail()): 
-                                the_post_thumbnail('large'); 
+                                echo '<img src="'.get_the_post_thumbnail_url().'">';
                             endif;
                         ?>
                         <div class="card-body">