Add columns for statement.

Author: cognigami

src/pages/index.astro

@@ -136,7 +136,7 @@ import Layout from '../layouts/Layout.astro';
        OPENING STATEMENT
        ============================================= -->
   <section class="opening section-spacing">
-    <div class="opening__inner fade-up">
+    <div class="opening__inner two-col fade-up">
       <p class="opening__text">
         I’m a strategist, a builder, and a researcher. I make the previously
         impossible seem routine. Over the past 15 years, I’ve built teams and

src/styles/global.css

@@ -569,6 +569,25 @@ p a:hover, .body-link:hover {
   text-align: left;
 }
 
+/* =============================================
+   TWO COLUMN TEXT BLOCK
+   ============================================= */
+.two-col {
+  columns: 2;
+  column-gap: 48px;
+  column-rule: 1px solid var(--color-divider);
+}
+
+.two-col p {
+  break-inside: avoid;
+}
+
+@media (max-width: 768px) {
+  .two-col {
+    columns: 1;
+  }
+}
+
 /* =============================================
    RESPONSIVE
    ============================================= */