From 4b8d777e169704f503ec5bbc3f2b8d71145a2d48 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 10 Sep 2025 15:51:55 -0500
Subject: [PATCH] Fix that two-column layout

---
 app/assets/stylesheets/events.css | 21 ++++++---------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/events.css b/app/assets/stylesheets/events.css
index 0096cd317..22fa1bf3f 100644
--- a/app/assets/stylesheets/events.css
+++ b/app/assets/stylesheets/events.css
@@ -42,10 +42,8 @@
     }
 
     > * {
+      column-count: 2;
       column-gap: var(--inline-space-double);
-      display: grid;
-      grid-auto-flow: row dense;
-      grid-template-columns: 1fr 1fr;
       margin-inline: auto;
       max-inline-size: 80ch;
     }
@@ -55,16 +53,16 @@
     }
 
     h3 {
+      column-span: all;
       font-size: var(--text-large);
-      grid-column: span 2;
       line-height: 1.3;
       margin-block: 0.5em 0.25em;
       text-align: center;
       text-wrap: balance;
 
       + p {
+        column-span: all;
         font-size: var(--text-medium);
-        grid-column: span 2;
         margin-block: 0 1.5em;
         text-align: center;
         text-wrap: balance;
@@ -72,23 +70,16 @@
     }
 
     h4 {
+      break-after: avoid-column;
       font-size: var(--text-medium);
       line-height: 1.3;
       margin-block: 0.5em 0.25em;
-      grid-column: 1;
+      text-wrap: balance;
 
       + p {
-        grid-column: 1;
+        break-inside: avoid-column;
         margin-block: 0 1.5em;
       }
-
-      &:nth-of-type(even) {
-        grid-column: 2;
-
-        + p {
-          grid-column: 2;
-        }
-      }
     }
 
     hr { display: none; }