Mobile: center hero tagline; move services CTA below cards

Author: MMesch

src/pages/index.module.css

@@ -74,6 +74,7 @@
   .tech_tagline {
     font-size: 20px;
     line-height: 150%;
+    text-align: center;
   }
 }
 
@@ -97,25 +98,16 @@
   padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg);
 }
 
-.services_link_mobile {
-  display: none;
-}
-
 .projects_link {
   display: none;
 }
 
 @media (max-width: 996px) {
-  .services_link_mobile {
-    display: block;
-  }
-
   .projects_link {
-    display: block;
-  }
-
-  .services_link_desktop {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ifm-spacing-sm);
   }
 }
 

src/pages/index.tsx

@@ -62,9 +62,6 @@ function HomeContent() {
 
       {/* ── How we work with you (services) ───────────────────────────────── */}
       <Section fullHeight>
-        <div className={styles.services_link_mobile}>
-          <Link className={`link-to-button ${styles.link_to_services}`} href="/services/">DISCOVER OUR SERVICES</Link>
-        </div>
         <h2 className="text--center">How we work with you</h2>
         <CardGrid cols={3}>
           <li>
@@ -91,9 +88,7 @@ function HomeContent() {
         </CardGrid>
         <div className={styles.projects_link}>
           <Link className={`link-to-button ${styles.link_to}`} href="/projects">DISCOVER ALL OF OUR PROJECTS</Link>
-          <div className={styles.services_link_desktop}>
-            <Link className={`link-to-button ${styles.link_to_services}`} href="/services/">DISCOVER OUR SERVICES</Link>
-          </div>
+          <Link className={`link-to-button ${styles.link_to_services}`} href="/services/">DISCOVER OUR SERVICES</Link>
         </div>
       </Section>