Center the stream column, hang the others

app/assets/stylesheets/card-columns.css

@@ -24,8 +24,9 @@
     --collapsed: 40px;
     --expanded-min: 450px;
 
-    display: flex;
+    display: grid;
     gap: calc(var(--cards-gap) / 4);
+    grid-template-columns: 1fr 1fr 1fr;
     justify-content: center;
     align-items: stretch;
     position: relative;
@@ -55,18 +56,15 @@
       z-index: 1;
     }
 
-    .title-nav {
-      align-self: start;
-      justify-self: start;
-      margin: var(--cards-gap) var(--cards-gap) auto auto;
-      writing-mode: vertical-rl;
+    .left-col {
+      /* margin-inline-start: auto; */
     }
 
-    .header__title {
-      font-style: oblique;
-      line-height: 1;
-      text-align: start;
-      text-transform: uppercase;
+    .right-col {
+      display: flex;
+      gap: calc(var(--cards-gap) / 4);
+      justify-content: start;
+      align-items: stretch;
     }
   }
 
@@ -535,7 +533,6 @@
     --column-color: var(--color-ink-lighter);
 
     margin-block: var(--cards-gap);
-    margin-inline-end: auto;
 
     @media (min-width: 640px) {
       padding-inline: var(--cards-gap);

app/views/cards/index/_columns.html.erb

@@ -1,16 +1,21 @@
 <% cache @cache_key do %>
   <%= turbo_frame_tag :card_columns do %>
     <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collapsed-class="is-collapsed">
+      <div class="left-col">
       <%= render "cards/index/engagement/on_deck", user_filtering: user_filtering, **on_deck.to_h %>
+        </div>
+
       <%= render "cards/index/engagement/considering", user_filtering: user_filtering, **considering.to_h %>
 
-      <% if workflow = user_filtering.single_collection.workflow %>
-        <% workflow.stages.each do |stage| %>
-          <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, stage: stage %>
+      <div class="right-col">
+        <% if workflow = user_filtering.single_collection.workflow %>
+          <% workflow.stages.each do |stage| %>
+            <%= render "cards/index/engagement/doing", user_filtering: user_filtering, **doing.to_h, stage: stage %>
+          <% end %>
         <% end %>
-      <% end %>
 
-      <%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
+        <%= render "cards/index/engagement/closed", user_filtering: user_filtering, **closed.to_h %>
+      </div>
     </div>
   <% end %>
 <% end %>