fix: resize and rearrange hero landing illustrations for tablet and mobile screens

src/components/HeroSection.module.css

@@ -224,10 +224,17 @@
    TABLET  501px – 1100px — match the illustration breakpoint
    ================================================================ */
 @media (max-width: 1100px) and (min-width: 501px) {
+  .heroContentWrapper {
+    height: auto;
+    min-height: clamp(540px, 64vw, 640px);
+  }
+
   .heroContent {
-    /* Top-anchor content so it sits nicely in the upper-center zone */
+    height: auto;
+    min-height: clamp(540px, 64vw, 640px);
     justify-content: flex-start;
     padding-top: clamp(60px, 8vw, 90px);
+    padding-bottom: 40px;
   }
 
   .heroTitle {
@@ -253,7 +260,7 @@
 @media (max-width: 500px) {
   .heroContentWrapper {
     height: auto;
-    min-height: 520px;
+    min-height: 540px;
   }
 
   .topBar {
@@ -267,8 +274,8 @@
 
   .heroContent {
     height: auto;
-    min-height: 520px;
-    padding: 66px 16px 36px;
+    min-height: 540px;
+    padding: 66px 16px 40px;
     justify-content: flex-start;
   }