improvement: refactor the whole preview system

scss/components/_previews.scss

@@ -1,142 +1,121 @@
 .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;
+    width:100%
-  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();
+    @include border-radius();
-  width:100%;
+    width:100%;
-  margin:auto;
+    margin:auto;
-  box-shadow: $large-shadow, $inset-shadow;
+    box-shadow: $large-shadow, $inset-shadow;
 }
 
 .preview-link:hover {
-  text-decoration:none!important;
+    text-decoration:none!important;
 }
 
 .preview-item {
-
+    height:200px;
-  height:200px;
+    overflow:hidden;
-  overflow:hidden;
+    font-size:0.9em;
-  font-size:0.9em;
+    line-height: 1.5em !important;
-	line-height: 1.5em !important;
+    padding:0.2em;
-  padding:0.2em;
+    text-align:justify;
-  text-align:justify;
+    background-color:rgba(0,0,0,0.05);
-  background-color:rgba(0,0,0,0.05);
+    color:rgba(0,0,0,0.4);
-  color:rgba(0,0,0,0.4);
+    position: relative;
-	position: relative;
 
 
-	display: flex;
+    display: flex;
-  -ms-flex-align: center !important;
+    -ms-flex-align: center !important;
-  align-items: center !important;
+    align-items: center !important;
-  justify-content: center;
+    justify-content: center;
 }
 
 .preview-content {
-  max-height:200px;
+    max-height:200px;
-}
+    & > p {
+        width:100%;
+        margin:auto;
 
-.preview-content > p {
+        &.p-img {
-  width:100%;
+            text-align:center;
-  margin:auto;
+            margin:auto;
-}
+            padding:auto;
+            display: block;
+            width:100%;
+        }
 
-.preview-content > p.p-img {
+        & > img {
-  text-align:center;
+            max-width:100%;
-  margin:auto;
+            height:auto;
-  padding:auto;
+            vertical-align:middle;
-  display: block;
+            margin:auto;
-  width:100%;
+            text-align:center;
-}
+        }
+    }
 
-.preview-content > p > 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;
+    margin-bottom:0px;
-  max-width:100%;
+    max-width:100%;
-  display:none;
+    display:none;
 }
 
 .preview-item h1 {
-  display:none;
+    display:none;
 }
 
 .preview-overlay {
-	height: 100%;
+    height: 100%;
-	width: 100%;
+    width: 100%;
-	opacity: 0;
+    opacity: 0;
-	top: 0;
+    top: 0;
-	left: 0;
+    left: 0;
-	position: absolute;
+    position: absolute;
-	padding: 0;
+    padding: 0;
-	transition: opacity .5s;
+    transition: opacity .5s;
-	color: #FFF;
+    color: #FFF;
-	background-color: rgba(0,0,0,0.5);
+    background-color: rgba(0,0,0,0.5);
-	text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
+    text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
-  backdrop-filter: none;
+    backdrop-filter: none;
-}
 
-.preview-overlay h1 {
+    h1 {
-  max-width:100%;
+        max-width:100%;
-  padding-top:0.3em;
+        padding-top:0.3em;
-  margin:auto;
+        margin:auto;
-  margin-bottom:0px;
+        margin-bottom:0px;
-  text-align:center;
+        text-align:center;
-  display:block;
+        display:block;
-  font-size:2em;
+        font-size:2em;
-  color: white;
+        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;
+    color:white;
-  text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
+    text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
 }
 
 .preview-item:hover .preview-overlay {
-  opacity: .9;
+    opacity: .9;
-  transition: opacity .5s;
+    transition: opacity .5s;
-  backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
 }
 
 .comment-text {
-  margin-top:0.8em;
+    margin-top:0.8em;
 }
 
 .card-preview time {
-  margin-bottom:0.4em;
+    margin-bottom:0.4em;
-  display:block;
+    display:block;
 }

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;