.

cards/templates/cards/_card_hero_styles.html

@@ -10,10 +10,10 @@
 
   .card-canonical .toptrump-card {
     width: var(--card-width, 83mm);
-    height: var(--card-height, 120mm);
+    height: var(--card-height, 130mm);
   }
 
-  .toptrump-card .hero-image{height:calc(var(--card-height, 120mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
+  .toptrump-card .hero-image{height:calc(var(--card-height, 130mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
 
   /* For most designs center the dino image absolutely and allow an inline
      scale transform (the fragments provide `transform: translate(...) scale(...)`). */

cards/templates/cards/_card_inner_design3.html

@@ -6,7 +6,7 @@
 
 
     {% if card.image %}
-      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); max-height:160px; border-radius:8px; z-index:1;">
+      <img class="card-hero-img" src="{{ card.image.url }}" alt="{{ card.name }}" style="transform:translate(-50%,-50%) scale({{ card.image_scale }}); border-radius:8px; z-index:1;">
     {% endif %}
   </div>
   <div class="title-band" style="background:linear-gradient(90deg,#ffd54f,#ff7043); color:#222; padding:12px; font-weight:800; font-size:1.25rem; text-align:center">{{ card.name }}</div>
@@ -37,16 +37,16 @@
     </div>
     <div style="margin-top:0.5rem">{{ card.description|linebreaksbr }}</div>
     {% if card.facts_list %}
-      <div style="margin-top:0.5rem;">
+      <div style="margin-top:0.25rem;">
-        <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+        <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
-          <span style="background:#ffd54f;color:#222;padding:4px;border-radius:6px;font-weight:800;font-size:0.9rem;">✨</span>
+          <span style="background:#ffd54f;color:#222;padding:2px;border-radius:4px;font-weight:700;font-size:0.8rem;line-height:1;">✨</span>
-          <strong style="font-size:0.95rem;">Fun facts</strong>
+          <strong style="font-size:0.9rem;line-height:1;">Fun facts</strong>
         </div>
-        <div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:8px;border-radius:8px;">
+        <div style="background:#fbfcfd;border:1px solid rgba(0,0,0,0.04);padding:6px;border-radius:8px;">
           <ul style="margin:0;padding:0 0 0 0.85rem;list-style:none;display:flex;flex-direction:column;gap:6px;">
             {% for fact in card.facts_list %}
               <li style="display:flex;gap:8px;align-items:flex-start;">
-                <span style="color:#ffb74d;font-size:1.05rem;line-height:1;margin-top:2px;">•</span>
+                <span style="color:#ffb74d;font-size:0.95rem;line-height:1;margin-top:1px;">•</span>
                 <span style="flex:1;color:#333;">{{ fact }}</span>
               </li>
             {% endfor %}

cards/templates/cards/printable.html

@@ -6,7 +6,7 @@
     <title>Printable cards</title>
     <style>
       /* Canonical card size for printable view */
-      :root{ --card-width: 83mm; --card-height: 120mm; }
+      :root{ --card-width: 83mm; --card-height: 130mm; }
       /* A4 portrait: 210mm x 297mm. Use mm units to better match print sizing. */
       @page { size: A4 portrait; margin: 12mm; }
       html,body{height:100%; margin:0; padding:0;}
@@ -44,8 +44,12 @@
           left:50%;
           top:50%;
           transform-origin:center;
-          min-width:110%;
+          /* Reduce the minimum size used for print so the image doesn't
-          min-height:110%;
+             intrude into neighbouring cards when printing multiple cards
+             per sheet. 100% keeps the image filling the hero area but
+             avoids the slight overlap caused by 110%. */
+          min-width:100%;
+          min-height:100%;
           width:auto;
           height:auto;
           object-fit:cover;
@@ -116,6 +120,7 @@
         <div class="cards-grid" style="grid-template-columns: repeat({{ columns|default:2 }}, var(--card-width)); gap:8mm;">
           {% for card in page_cards %}
             <div class="print-card">
+              <div class="card-canonical">
                 {% if design == 1 %}
                   {% include 'cards/_card_inner_design1.html' %}
                 {% elif design == 2 %}
@@ -146,6 +151,7 @@
                   </div>
                 {% endif %}
               </div>
+            </div>
           {% endfor %}
         </div>
       </div>