Sticky column titles, tighter grid

app/assets/stylesheets/events.css

@@ -13,6 +13,7 @@
   display: grid;
   gap: var(--grid-lines);
   justify-items: center;
+  margin: var(--grid-lines);
   padding: calc(var(--grid-lines) / 2);
 
   .event {
@@ -47,9 +48,15 @@
   border-radius: 0;
   display: flex;
   inline-size: 100%;
-  margin: var(--grid-lines);
 }
 
 .events__index {
   --row-gap: calc(4 * var(--block-space));
 }
+
+.event-grid-column-title {
+  background-color: var(--color-bg);
+  inset-block-start: 0;
+  padding-block: var(--grid-lines);
+  z-index: 1;
+}

app/helpers/events_helper.rb

@@ -45,7 +45,7 @@ module EventsHelper
 
   def render_column_headers
     [ "Touched", "Discussed", "Added", "Popped" ].map do |header|
-      content_tag(:h3, header, class: "event-grid-column-title margin-block-end-half")
+      content_tag(:h3, header, class: "event-grid-column-title margin-block-end-half position-sticky")
     end.join.html_safe
   end
 end