intro text in two columns

Author: lathug

website/index.html

@@ -35,18 +35,28 @@
 
     <div class="section" data-anchor="introduction">
       <h2>How have sociocultural, economic, and geopolitical contexts been reflected in the Olympics over time?</h2>
-      <p>
-        At first glance, the Olympics look like so-called fair Games: the best atheletes compete, and the best win.
-        But is it really that simple?
-        The truth is, medals are influenced by much more than talent.
-      </p>
-      <p>
-        Wealth, population, politics, and opportunities all play a role in who gets on the podium.
-        We're going to see five axes behind medals in Olympics:
-        gender representation, geography of medal winners, athlete body types, geopolitical disruptions, and economic fairness.
-        Scroll through the story to see how social, political, and economic contexts have shaped
-        the Games over time.
-      </p>
+      <div class="intro-columns">
+
+        <div class="intro-column">
+          <p>
+            At first glance, the Olympics look like so-called fair Games: the best athletes compete,
+            and the best win. But is it really that simple?
+            The truth is, medals are influenced by much more than talent.
+          </p>
+        </div>
+
+        <div class="intro-column">
+          <p>
+            Wealth, population, politics, and opportunities all play a role in who gets on the podium.
+            We're going to see five axes behind medals in Olympics:
+            gender representation, geography of medal winners, athlete body types,
+            geopolitical disruptions, and economic fairness.
+            Scroll through the story to see how social, political, and economic contexts
+            have shaped the Games over time.
+          </p>
+        </div>
+
+      </div>
 
     </div>
 

website/styles.css

@@ -171,6 +171,26 @@ p {
   flex-direction: column;
 }
 
+.intro-columns {
+  display: flex;
+  justify-content: center;
+  gap: 80px;
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 40px;
+}
+
+.intro-column {
+  flex: 1;
+  max-width: 500px;
+}
+
+.intro-column p {
+  width: 100%;
+  text-align: justify;
+  margin: 0;
+}
+
 /* =============================================
    Gender section
    =========================================== */
@@ -457,6 +477,14 @@ p {
   }
 }
 
+@media (max-width: 900px) {
+  .intro-columns {
+    flex-direction: column;
+    gap: 30px;
+    width: 90%;
+  }
+}
+
 /* =============================================
    Geopolitics section
    =========================================== */