.

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;">

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 */
+      /* Hero image: make the dinosaur image larger, cover the banner and remove shadow
-      .toptrump-card .hero-image img.card-hero-img{
+         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%;