From 60e19e864264d6471dfe5f976c28c6ba46b50cac Mon Sep 17 00:00:00 2001
From: Tom Roth <info@tomroth.consulting>
Date: Fri, 31 Jul 2026 10:14:20 +0200
Subject: [PATCH] Hero image: crop to face, match exact text-stack height

---
 src/css/main.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/css/main.css b/src/css/main.css
index 1da4c5e..6245ec1 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -640,8 +640,9 @@ a {
 
 @media (min-width: 1024px) {
   .hero__content {
-    padding-block: var(--space-8);
-    justify-content: center;
+    /* No extra padding — section handles outer breathing room.
+       Image will be exactly the natural height of the text stack. */
+    justify-content: flex-start;
   }
 }
 
@@ -694,10 +695,10 @@ a {
   }
 
   .hero__image img {
-    /* 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. */
+    /* Fill the content column height exactly; crop from the top
+       so only Diana's face and shoulders are visible. */
     height: 100%;
+    object-position: center 8%;
     aspect-ratio: unset;
     border-radius: 0;
   }