css/columns

rtfd/public/html/index.html

@@ -28,7 +28,16 @@
 
       <a href="relative/destination">Go elsewhere…</a>
 
-      <img src="images/debanner.jpeg" alt="Debian banner.">
+
+      <div class="columns">
+        <div>
+          First column to describe the associated
+          image of a debian landscape debanner.
+        </div>
+        <div>
+          <img src="images/debanner.jpeg" alt="Debian banner.">
+        </div>
+      </div>
 
       <div class="wrapper">
 
@@ -50,6 +59,12 @@
           <time>Time.</time>
         </section>
 
+        <section>
+          <h2>Yet Another Heading</h2>
+          <h3>Sub Heading</h3>
+          <p>Yet another paragraph.</p>
+        </section>
+
       </div>
 
     </main>

rtfd/public/html/style/main.css

@@ -34,6 +34,12 @@ background-color: #300;
 padding: 1em 2em;
 }
 
+.columns {
+display: grid;
+gap: 1em;
+grid-template-columns: 1fr 2fr;
+}
+
 .sectionless {
 background-color: #630;
 padding: .5em 1em;
@@ -45,7 +51,6 @@ font-size: 1.5em;
 
 .wrapper {
 display: flex;
-max-inline-size: 60ch;
 }
 
 main {
@@ -66,6 +71,8 @@ text-align: center;
 }
 
 img {
+display: block;
+max-inline-size: 100%;
 }
 
 p {