From 9dd761aa4118d91fff6f0fc8bc950332f6347144 Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Sat, 6 Dec 2025 20:26:46 +0000
Subject: [PATCH] .

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

diff --git a/cards/templates/cards/_card_preview_design4.html b/cards/templates/cards/_card_preview_design4.html
index 0e1e40c..180a903 100644
--- a/cards/templates/cards/_card_preview_design4.html
+++ b/cards/templates/cards/_card_preview_design4.html
@@ -55,7 +55,7 @@
             </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: {{ card.background_image_scale }}; background-position:center; flex:1; position:relative; padding:8px;">
               {% if card.image %}
-                <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);">
+                <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform: 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 3caa71e..cef3b69 100644
--- a/cards/templates/cards/base.html
+++ b/cards/templates/cards/base.html
@@ -50,9 +50,29 @@
       }
       /* Larger hero image for design-4 to match list view scale behavior */
       .toptrump-card.design-4 .hero-image { height: 560px; }
+      /* For design-4 use a non-cropping image layout so wide dinos aren't clipped */
+      .toptrump-card.design-4 .hero-image{ overflow:hidden; display:flex; align-items:center; justify-content:center }
+      .toptrump-card.design-4 .card-hero-img{
+        position:static !important;
+        left:auto !important;
+        top:auto !important;
+        transform:none !important;
+        display:block;
+        margin:0 auto;
+        /* Allow a modest overflow so the image is cropped by the hero's
+           `overflow:hidden` — this intentionally crops ~20% horizontally */
+        width:120% !important;
+        max-width:none !important;
+        max-height:120% !important;
+        object-position:center center !important;
+        height:auto;
+        object-fit:contain;
+      }
       .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{
+      /* Hero image: make the dinosaur image larger, cover the banner and remove shadow
+         Exclude design-4 here so that design-4 can use `object-fit: contain` and
+         avoid horizontal cropping (design-4 has its own layout rules above). */
+      .toptrump-card:not(.design-4) .hero-image img.card-hero-img{
         position:absolute;
         left:50%;
         top:50%;