new feed layout

assets/css/main.css

@@ -475,15 +475,20 @@ footer {
 .feed-section #feed {
     margin: 2rem auto;
     padding: 1rem;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 2rem;
-    justify-content: center;
 }
 
 .page {
-    max-width: 80%;
-    margin: 0 auto;
+    column-count: 2;
+    column-gap: 2rem;
+}
+
+.page .feed-entry {
+    justify-content: start;
+    break-inside: avoid;
+    margin-bottom: 2rem;
 }
 
 .feed-thumbnail-wrapper {
@@ -532,7 +537,7 @@ footer {
 }
 
 .feed-entry {
-    flex: 0 1 calc(50% - 2rem);
+    width: 100%;
     box-sizing: border-box;
     background-color: var(--color-off);
     border: 1px solid var(--color-text);
@@ -544,14 +549,6 @@ footer {
     justify-content: space-between;
 }
 
-.page .feed-entry {
-    justify-content: start;
-}
-
-.page .feed-entry {
-    margin-bottom: 2rem;
-}
-
 .feed-content {
     font-size: 1rem;
     line-height: 1.6;
@@ -659,29 +656,18 @@ footer {
     .ese-section .card-body .page {
         max-width: 100%;
     }
+
+    .page {
+        column-count: 1;
+        column-gap: 1rem;
+        margin: 0 2rem 0 2rem;
+    }
 }
 
 @media (min-width: 992px) {
     .dropdown-item-mobile {
         display: none !important;
     }
-
-    .page {
-        display: flex;
-        overflow-x: auto;
-        scroll-snap-type: x mandatory;
-        gap: 1rem;
-        padding: 1rem;
-        max-width: 100%;
-    }
-
-    .page .feed-entry {
-        flex: 0 0 auto;
-        scroll-snap-align: start;
-        width: calc(100vw / 3 - 2rem);
-        height: auto !important;
-        align-self: flex-start;
-    }
 }
 
 @media (min-width: 1261px) {