3.2.3

Update and separate the yearly cosmic events.
Set to display the next 4 rather than the next x months

assets/css/ui.css

@@ -182,7 +182,8 @@
 }
 .almanac-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 1fr;
   gap: 0;
 }
 .almanac-entry {
@@ -190,10 +191,13 @@
   align-items: flex-start;
   gap: 13px;
   padding: 13px 18px;
-  border-bottom: 1px solid #f0e4cc;
   border-right: 1px solid #f0e4cc;
   transition: background 0.15s;
 }
+/* Desktop: single row of 4 — vertical dividers only, none on the far edge. */
+.almanac-entry:last-child {
+  border-right: none;
+}
 .almanac-entry:hover {
   background: #fef8e8;
 }
@@ -274,10 +278,37 @@
   font-style: italic;
 }
 
+/* ≤900px: fall back to a 2×2 grid so cards stay readable. */
+@media (max-width: 900px) {
+  .almanac-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .almanac-entry {
+    border-right: 1px solid #f0e4cc;
+  }
+  .almanac-entry:nth-child(2n) {
+    border-right: none;             /* right edge of the grid */
+  }
+  .almanac-entry:nth-child(-n + 2) {
+    border-bottom: 1px solid #f0e4cc; /* divider between the two rows */
+  }
+}
+
+/* ≤600px: single column. */
 @media (max-width: 600px) {
   .almanac-list {
     grid-template-columns: 1fr;
   }
+  .almanac-entry,
+  .almanac-entry:nth-child(2n) {
+    border-right: none;
+  }
+  .almanac-entry {
+    border-bottom: 1px solid #f0e4cc;
+  }
+  .almanac-entry:last-child {
+    border-bottom: none;
+  }
 }
 
 /* ── EVENT BANNER — mobile fixes ────────────────────────────────────── */