improvement: refactor the whole preview system

scss/components/_previews.scss

@@ -1,35 +1,15 @@
 .previews-section {
-  display: flex;
+    display: grid;
-  align-content: flex-start;
+    grid-template-columns: auto auto auto;
-  flex-wrap: wrap;
+    grid-template-rows: auto;
+    grid-gap: 1.5rem;
+    padding-bottom: 1.5rem;
 }
 
 .preview-container {
-  margin-bottom:1em;
-  padding:0.4em;
     width:100%
 }
 
-
-
-@media(max-width:767px){}
-@media(min-width:768px){}
-@media(min-width:992px){
-
-  .prev-col-2 .preview-container {
-    width:50%;
-  }
-
-  .prev-col-3 .preview-container {
-    width:33%;
-  }
-
-  .prev-col-4 .preview-container {
-    width:25%;
-  }
-
-}
-
 .card-preview {
     @include border-radius();
     width:100%;
@@ -42,7 +22,6 @@
 }
 
 .preview-item {
-
     height:200px;
     overflow:hidden;
     font-size:0.9em;
@@ -62,14 +41,11 @@
 
 .preview-content {
     max-height:200px;
-}
+    & > p {
-
-.preview-content > p {
         width:100%;
         margin:auto;
-}
 
-.preview-content > p.p-img {
+        &.p-img {
             text-align:center;
             margin:auto;
             padding:auto;
@@ -77,13 +53,16 @@
             width:100%;
         }
 
-.preview-content > p > img {
+        & > img {
             max-width:100%;
             height:auto;
             vertical-align:middle;
             margin:auto;
             text-align:center;
         }
+    }
+
+}
 
 .preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
     margin-bottom:0px;
@@ -108,9 +87,8 @@
     background-color: rgba(0,0,0,0.5);
     text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
     backdrop-filter: none;
-}
 
-.preview-overlay h1 {
+    h1 {
         max-width:100%;
         padding-top:0.3em;
         margin:auto;
@@ -120,6 +98,7 @@
         font-size:2em;
         color: white;
     }
+}
 
 .preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10  {
     color:white;

style.css

@@ -940,30 +940,17 @@ a.list-group-item:hover {
 }
 
 .previews-section {
-  display: flex;
+  display: grid;
-  align-content: flex-start;
+  grid-template-columns: auto auto auto;
-  flex-wrap: wrap;
+  grid-template-rows: auto;
+  grid-gap: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
 .preview-container {
-  margin-bottom: 1em;
-  padding: 0.4em;
   width: 100%;
 }
 
-@media (min-width: 992px) {
-  .prev-col-2 .preview-container {
-    width: 50%;
-  }
-
-  .prev-col-3 .preview-container {
-    width: 33%;
-  }
-
-  .prev-col-4 .preview-container {
-    width: 25%;
-  }
-}
 .card-preview {
   border-radius: 3px 3px 3px 3px;
   width: 100%;
@@ -994,12 +981,10 @@ a.list-group-item:hover {
 .preview-content {
   max-height: 200px;
 }
-
 .preview-content > p {
   width: 100%;
   margin: auto;
 }
-
 .preview-content > p.p-img {
   text-align: center;
   margin: auto;
@@ -1007,7 +992,6 @@ a.list-group-item:hover {
   display: block;
   width: 100%;
 }
-
 .preview-content > p > img {
   max-width: 100%;
   height: auto;
@@ -1040,7 +1024,6 @@ a.list-group-item:hover {
   text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
   backdrop-filter: none;
 }
-
 .preview-overlay h1 {
   max-width: 100%;
   padding-top: 0.3em;