feat: Simplify mosaic

The old implementation was not good and would render the list on mobile
in the wrong order

1 files changed, 33 insertions, 17 deletions

diff --git a/scss/main.scss b/scss/main.scss
index 532a38a..95db99f 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -15,6 +15,8 @@ $card-content-padding: 0;
 $table-cell-padding: 0.5em;
 $table-cell-border-width: 0;
 
+$section-padding: 0 1.5rem;
+
 $tag-delete-margin: 15px;
 
 $title-weight: normal;
@@ -57,19 +59,6 @@ a.is-danger {
     margin-top: 30px;
 }
 
-.card-image {
-    padding: 5px;
-}
-
-.image.is-fit {
-  height: auto;
-  width: 100%;
-}
-
-.column {
-    padding: 0;
-}
-
 th {
     font-weight: normal;
 }
@@ -79,10 +68,6 @@ form {
     padding-right: 15px;
 }
 
-.img {
-    object-fit: cover;
-}
-
 .text-size-1{
     @extend .is-size-4 !optional;
 }
@@ -90,3 +75,34 @@ form {
 .text-size-2{
     @extend .is-size-5 !optional;
 }
+
+.gallary_container{
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
+  grid-auto-rows: 15.5em;  
+  padding: 10px;
+}
+
+.image_container img{
+  width: 100%;
+  height: 100%; 
+    box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
+  object-fit: cover;
+}
+
+@media screen and (min-width: $breakpoint) {
+  .image-tall {
+    grid-row: span 2 / auto;
+  }
+
+  .image-wide {
+    grid-column: span 2 / auto;
+  }
+}
+
+// Fix horizontal scroll on iOS
+.scrolling-element {
+    overflow-x: scroll; /* Must be 'scroll' not 'auto' */
+    -webkit-overflow-scrolling: touch;
+}