Mobile/tablet: larger fonts at 600-996px, bigger hero title; projects: add section h2

Author: MMesch

src/css/custom.css

@@ -215,6 +215,22 @@ ul {
   }
 }
 
+/* Tablet range: overrides phone sizes for wider mobile viewports. */
+@media (max-width: 996px) and (min-width: 600px) {
+  body h1 {
+    font-size: 56px;
+  }
+
+  body h2 {
+    font-size: 42px;
+  }
+
+  body p {
+    font-size: 16px;
+    line-height: 24px;
+  }
+}
+
 /******  Class that are specific to larger screens*/
 @media (min-width: 996px) {
   h1 {

src/pages/index.module.css

@@ -78,6 +78,16 @@
   }
 }
 
+@media (max-width: 996px) and (min-width: 600px) {
+  .hero_title {
+    font-size: 6rem;
+  }
+
+  .tech_tagline {
+    font-size: 26px;
+  }
+}
+
 /* ── Services (How we work with you) ─────────────────────────────────────── */
 
 .topics_header {

src/pages/projects.tsx

@@ -30,6 +30,11 @@ function ProjectsContent() {
 
       <SectionSeparator variant={1} />
 
+      {/* ── Project list ──────────────────────────────────────────────────── */}
+      <Section spacing="tight">
+        <h2 className="text--center">What we build and maintain</h2>
+      </Section>
+
       {/* ── Jupyter ───────────────────────────────────────────────────────── */}
       <SplitSection
         bg="white"