Fix that two-column layout

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; }