From 78c7c1d5029a5c25371a93514903dd6e7a771b8d Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 20:11:25 +0000
Subject: [PATCH] Enhance design-4 layout: adjust hero image size and card
 dimensions for improved visual consistency

---
 cards/templates/cards/_card_preview_design4.html | 4 ++--
 cards/templates/cards/base.html                  | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index c973112..0e1e40c 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -53,9 +53,9 @@
                 </div>
               </div>
             </div>
-            <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size:cover; background-position:center; flex:1; display:flex; align-items:center; justify-content:center; padding:8px;">
+            <div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}'); background-size: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px;">
               {% if card.image %}
-                <img src="{{ card.image.url }}" alt="{{ card.name }}" style="max-height:360px; transform:scale({{ card.image_scale }}); border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
+                <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform: translate(-50%,-50%) scale({{ card.image_scale }}); transform-origin:center; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,0.08);">
               {% endif %}
             </div>
             <div style="padding:8px 10px; border-top:1px solid rgba(0,0,0,0.04); background:#fafafa;">
diff --git a/cards/templates/cards/base.html b/cards/templates/cards/base.html
index 3469fdc..3caa71e 100644
--- a/cards/templates/cards/base.html
+++ b/cards/templates/cards/base.html
@@ -45,9 +45,11 @@
       }
       .toptrump-card.design-4 {
         width: 680px;
-        min-height: 460px;
+        min-height: 680px;
         display: flex;
       }
+      /* Larger hero image for design-4 to match list view scale behavior */
+      .toptrump-card.design-4 .hero-image { height: 560px; }
       .toptrump-card .hero-image{height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden}
       /* Hero image: make the dinosaur image larger, cover the banner and remove shadow */
       .toptrump-card .hero-image img.card-hero-img{