claude:style: collapse hero columns below 1200px and match heights above

Move the hero from col-lg-* to col-xl-* so the layout stacks below 1200px,
where the left logo card was naturally taller than the right card stack.
At xl and up, stretch the left .about-image-part to fill the column via
flex while centering the SVG with align-self. Trim the left card's inline
sizing so the right stack remains the height anchor. Extend the metrics-grid
top-margin breakpoint to cover the new 992-1199 stacked range so spacing
between the stacked cards stays consistent.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: kuco23

src/assets/css/custom.css

@@ -306,3 +306,33 @@
   color: rgba(255, 255, 255, 0.6);
   margin-bottom: 22px;
 }
+
+/* HERO: equalize left and right column heights at xl+ breakpoints.
+   Below 1200px the columns stack (col-xl-*), so no height matching is needed.
+   At xl and above, the right column's two stacked cards anchor the height
+   and the left .about-image-part stretches via flex to match. The left card's
+   natural content is intentionally kept shorter than the right's combined
+   height so this stretch direction holds at every side-by-side width. */
+@media (min-width: 1200px) {
+  .about-area .col-xl-4 {
+    display: flex;
+    flex-direction: column;
+  }
+  .about-area .col-xl-4 > div:first-child {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .about-area .about-image-part {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .about-area .about-image-part > img {
+    align-self: center;
+  }
+  .about-area .about-image-part .about-social {
+    margin-top: 20px;
+  }
+}

src/assets/css/pageStatsPanel.scss

@@ -113,7 +113,7 @@
   animation: stats-fade-in 0.4s 0.1s ease-out both;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 1199px) {
   .metrics-grid {
     margin-top: 30px;
   }

src/components/sections/hero.tsx

@@ -40,14 +40,14 @@ const Hero = () => {
       <div className="container">
         <div className="row">
           {/* <!-- START ABOUT IMAGE DESIGN AREA --> */}
-          <div className="col-lg-4">
+          <div className="col-xl-4">
             <SlideUp>
               <div className="about-image-part">
-                <img src={profile} alt="StakeCore" style={{ width: 215 }} />
-                <h2 style={{ marginTop: 20, marginBottom: 0, letterSpacing: '0.15em', textTransform: 'uppercase', fontSize: 32 }}>
+                <img src={profile} alt="StakeCore" style={{ width: 170 }} />
+                <h2 style={{ marginTop: 12, marginBottom: 0, letterSpacing: '0.15em', textTransform: 'uppercase', fontSize: 30 }}>
                   StakeCore
                 </h2>
-                <p style={{ marginTop: 30, marginBottom: 40 }}>
+                <p style={{ marginTop: 20, marginBottom: 20 }}>
                   Infrastructure provider for core crypto protocols on Flare, Avalanche, and Songbird.
                   Provide security by delegating your dormant tokens to us and earn RISK-FREE yield in return!
                 </p>
@@ -63,7 +63,7 @@ const Hero = () => {
           </div>
           {/* <!-- / END ABOUT IMAGE DESIGN AREA -->
           <!-- START ABOUT TEXT DESIGN AREA --> */}
-          <div className="col-lg-8">
+          <div className="col-xl-8">
             {component}
           </div>
           {/* <!-- / END ABOUT TEXT DESIGN AREA --> */}