feat(hero): refactor home hero to 2-column desktop grid and mobile visual flow

src/pages/index.astro

@@ -32,37 +32,39 @@ const featuredMetrics: Record<string, string> = {
 
 <BaseLayout title={SITE.title} description={SITE.description} altLocaleUrl={`${SITE.url}/zh/`}>
   <section class="hero">
-    <div class="hero-id">
-      <picture>
-        <source srcset={SITE.photo.smallWebp} type="image/webp" />
-        <img
-          class="hero-photo"
-          src={SITE.photo.small}
-          alt={`${SITE.author} (${SITE.handle})`}
-          width="72"
-          height="72"
-          decoding="async"
-        />
-      </picture>
-      <h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
+    <div class="hero-content">
+      <div class="hero-id">
+        <picture>
+          <source srcset={SITE.photo.smallWebp} type="image/webp" />
+          <img
+            class="hero-photo"
+            src={SITE.photo.small}
+            alt={`${SITE.author} (${SITE.handle})`}
+            width="72"
+            height="72"
+            decoding="async"
+          />
+        </picture>
+        <h1>{SITE.author} — full-stack developer &amp; DevOps engineer</h1>
+      </div>
+      <p class="hero-sub">
+        I build and operate production web systems — from the code down to the servers.
+        <strong>162 containers across three self-managed hosts</strong> run client sites, a mail
+        platform, CI/CD, workflow automation and this blog. I write up what broke, what the
+        evidence said, and how I fixed it.
+      </p>
+      <p class="hero-cta">
+        <a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
+        <a class="btn" href="/about/">Hiring? Profile &amp; stack →</a>
+        <a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
+      </p>
+      <p class="hero-note">
+        {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
+      </p>
     </div>
-    <p class="hero-sub">
-      I build and operate production web systems — from the code down to the servers.
-      <strong>162 containers across three self-managed hosts</strong> run client sites, a mail
-      platform, CI/CD, workflow automation and this blog. I write up what broke, what the
-      evidence said, and how I fixed it.
-    </p>
-    <p class="hero-cta">
-      <a class="btn btn-primary" href="#featured">Read the engineering case studies ↓</a>
-      <a class="btn" href="/about/">Hiring? Profile &amp; stack →</a>
-      <a class="btn" href={SITE.website} target="_blank" rel="noopener">Malaysian SME? How I work ↗</a>
-    </p>
-    <p class="hero-note">
-      {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
-    </p>
     <div class="hero-banner-card">
       <picture>
-        <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 1120px) 100vw, 1120px" type="image/webp" />
+        <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 900px) 100vw, 480px" type="image/webp" />
         <img
           class="hero-banner-img"
           src="/images/hero-banner.jpg"