From a407891fe408bd4296d763979e2f43582ecd44e1 Mon Sep 17 00:00:00 2001
From: David Madl <git@abanbytes.eu>
Date: Fri, 8 May 2026 15:28:57 +0200
Subject: [PATCH] lists in blocks, responsive centering

---
 index.html | 15 +++++++++++++++
 main.css   | 49 +++++++++++++++++++++++++++++++++++++------------
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/index.html b/index.html
index 1bd6e57..a2f0284 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,27 @@
 <div class="blocks">
   <div class="block">
     <h2>Optimizing software</h2>
+    <ul>
+      <li>Lorem ipsum</li>
+      <li>dolor sit amet</li>
+      <li>consecteur amet elit</li>
+    </ul>
   </div>
   <div class="block">
     <h2>Feasibility studies</h2>
+    <ul>
+      <li>Lorem ipsum</li>
+      <li>dolor sit amet</li>
+      <li>consecteur amet elit</li>
+    </ul>
   </div>
   <div class="block">
     <h2>Designing software</h2>
+    <ul>
+      <li>Lorem ipsum</li>
+      <li>dolor sit amet</li>
+      <li>consecteur amet elit</li>
+    </ul>
   </div>
 </div>
 <div class="body">
diff --git a/main.css b/main.css
index f0a0145..3568356 100644
--- a/main.css
+++ b/main.css
@@ -1,7 +1,17 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
+
+body {
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  margin: 0;
+}
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Space Grotesk", system-ui, sans-serif;
+}
+
 .blocks {
   display: flex;
   /*gap: 20px;*/
-  padding-top: 5.78vw;
+  padding-top: 5.78vw; /* hor spacing from line to heading top */
   
   background-image: url("https://abanbytes.eu/upload/hero_bg_plain.svg");
   background-repeat: no-repeat;
@@ -26,35 +36,50 @@
   margin-right: 13.05vw;
 }
 
-.block h2 {
-  margin-top: 0px;
-}
 .block {
   flex: 1;
   height: 200px;
-  background: #e5e7eb;
-  border: 1px solid #ccc;
+  /*background: #e5e7eb;
+  border: 1px solid #ccc;*/
   display: flex;
   /*align-items: center;
   justify-content: center;*/
+  flex-direction: column;
+}
+
+.block h2 {
+  margin-top: 0px;
+  margin-bottom: 0.5rem;
+  font-size: 1.5rem;
+}
+.block ul {
+  margin-top: 0;
+  padding-left: 1.25rem;
 }
 
 /* Small screens */
-@media (max-width: 600px) {
+@media (max-width: 960px) {
   .blocks {
     flex-direction: column;
-    padding-top: 15.92vw;
-    margin: 2.25vw;
+    padding-top: 18.17vw;
+    margin-top: 2.25vw;
+    margin-bottom: 2.25vw;
   }
 
   .block {
-    width: 100%;
+    width: min(100%, 15em);
+    padding-left: 5.72vw;
   }
 
   .block:nth-child(1), .block:nth-child(2), .block:nth-child(3) {
     margin-top: 0;
-    margin-right: 0;
     margin-bottom: 2.25vw;
-    margin-left: 0;
+    /* horizontal centering blocks */
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .block:nth-child(1) {
+    margin-top: 
   }
 }
\ No newline at end of file