adding different layouts for testing

public/s/css/f0ckm.css

@@ -3628,6 +3628,83 @@ div.posts {
   }
 }
 
+/* ── Feed Layout Variants ── */
+
+/* Layout 0: Grid (compact) — default, no overrides needed */
+div.posts.layout-0 {}
+
+/* Layout 1: Modern (3-column wider grid) */
+div.posts.layout-1 {
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+@media (max-width: 600px) {
+  div.posts.layout-1 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* Layout 2: Feed (X / Instagram style — single-column cards) */
+div.posts.layout-2 {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  max-width: 680px;
+  margin-left: auto;
+  margin-right: auto;
+  grid-template-columns: unset;
+}
+div.posts.layout-2 > a:not(.notif-item) {
+  width: 100%;
+  aspect-ratio: unset;
+  border-radius: 8px;
+  overflow: hidden;
+}
+div.posts.layout-2 > a:not(.notif-item)::before {
+  margin-top: 75%; /* ~4:3 portrait card */
+}
+@media (max-width: 600px) {
+  div.posts.layout-2 {
+    max-width: 100%;
+    gap: 12px;
+  }
+}
+
+/* Layout 3: YouTube style — 16:9 cards, 4-col desktop */
+div.posts.layout-3 {
+  grid-template-columns: repeat(4, 1fr);
+  gap: 12px;
+  padding: 0 4px;
+}
+div.posts.layout-3 > a:not(.notif-item) {
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+div.posts.layout-3 > a:not(.notif-item):hover,
+div.posts.layout-3 > a:not(.notif-item).touch-active {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 16px rgba(0,0,0,0.6);
+  outline: none;
+}
+/* No ::before override — preserves dynamic thumb aspect ratios (data-size spanning) */
+/* Tablet: 3 columns */
+@media (max-width: 960px) and (min-width: 601px) {
+  div.posts.layout-3 {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+  }
+}
+/* Mobile: 2 columns */
+@media (max-width: 600px) {
+  div.posts.layout-3 {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+    padding: 0;
+  }
+}
+
+
 div.posts>a:not(.notif-item) {
   display: inline-block;
   position: relative;