From e35dc8a238b06c5a7f8bc35ebc234ee3c0ea21db Mon Sep 17 00:00:00 2001
From: Christian Tietze <me@christiantietze.de>
Date: Sat, 22 Feb 2025 06:15:25 +0100
Subject: [PATCH 1/2] set width with max-height upper-limit to responsively
 size the heart

AFAIK if both dimensions are bounded with max-*, the browser won't try
to fill that proactively. Confirmed in FF/Chrome/Safari.
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 274496f..a37960b 100644
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
     <main class="flow">
       <hgroup id="hero">
         <!-- <span style="font-size: calc(1.618 * var(--step-4));">♥</span> -->
-        <img src="heart.svg" title="♥" style="max-width: clamp(1rem, 4rem + 12vw, 20rem); max-height: 80vh;">
+        <img src="heart.svg" title="♥" style="width: clamp(1rem, 4rem + 12vw, 20rem); max-height: clamp(2rem, 80vh, calc(2 * var(--step-4)));">
         <h1>Act&nbsp;different.</h1>
       </hgroup>
     </main>

From e3273dce447c4a0fa113c65c0b9f05b715e45b1c Mon Sep 17 00:00:00 2001
From: Christian Tietze <me@christiantietze.de>
Date: Sat, 22 Feb 2025 06:16:21 +0100
Subject: [PATCH 2/2] calculate gap between heart and title in golden ratio
 based on the title size

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a37960b..3b50de0 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
       }
       main > * { grid-column: content; }
       #hero { grid-column-start: 1; grid-column-end: 4; }
-      #hero { display: flex; flex-direction: column; gap: 15vh; align-items: center; margin-block: 4vh; }
+      #hero { display: flex; flex-direction: column; gap: calc(var(--step-4) / 1.618); align-items: center; margin-block: 4vh; }
       .flow > * + * {
         margin-block-start: var(--flow-space, 1em);
       }