Fix hero layout: image fills content height, no excess whitespace

src/css/main.css

@@ -596,7 +596,7 @@ a {
   .hero__inner {
     display: grid;
     grid-template-columns: 55% 45%;
-    align-items: center;
+    align-items: stretch;
     gap: var(--space-8);
     flex-direction: unset;
   }
@@ -608,6 +608,13 @@ a {
   gap: var(--space-4);
 }
 
+@media (min-width: 1024px) {
+  .hero__content {
+    padding-block: var(--space-8);
+    justify-content: center;
+  }
+}
+
 .hero__actions {
   display: flex;
   flex-wrap: wrap;
@@ -638,6 +645,8 @@ a {
 /* Image container — stacks below content on mobile, right column on desktop */
 .hero__image {
   width: 100%;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
 }
 
 .hero__image img {
@@ -646,11 +655,21 @@ a {
   aspect-ratio: 3 / 4;
   object-fit: cover;
   object-position: top;
+  display: block;
 }
 
 @media (min-width: 1024px) {
+  .hero__image {
+    border-radius: var(--radius-lg);
+  }
+
   .hero__image img {
-    aspect-ratio: 4 / 5;
+    /* Let the image fill the full height of the content column.
+       aspect-ratio is removed so the image stretches to whatever
+       height the left (text) column naturally takes. */
+    height: 100%;
+    aspect-ratio: unset;
+    border-radius: 0;
   }
 }