split cv bloc

src/body.php

@@ -12,10 +12,12 @@
     text-align: center;
 
     >* {
+      /* starts at column 2 and spans 1 column */
       grid-column: 2 / span 1;
     }
 
     >.grid_full_width {
+      /* starts at column 1 and spans all 3 columns */
       grid-column: 1 / span 3;
     }
 

src/modules/cv.html

@@ -34,6 +34,22 @@
         border: 1px dashed black;
         padding: 20px;
         padding-left: 40px;
+
+        &.split_columns {
+          display: grid;
+          grid-gap: 20px;
+          grid-auto-flow: row;
+          grid-template-rows: 1fr;
+
+          @media (min-width: 900px) {
+            grid-auto-flow: column;
+            grid-template-rows: auto 1fr;
+
+            ul {
+              padding-left: 0px;
+            }
+          }
+        }
       }
     }
   }
@@ -308,7 +324,7 @@
       <span class="en">EDUCATION</span>
     </h2>
 
-    <div class="dashed">
+    <div class="dashed split_columns">
       <p>
         <span class="fr"> ECOLES </span>
         <span class="en"> SCHOOLS </span>