diff --git a/theme/static/css/main.css b/theme/static/css/main.css
index 1d6f2ff..70d8fe6 100644
--- a/theme/static/css/main.css
+++ b/theme/static/css/main.css
@@ -89,17 +89,68 @@
     padding: 15px;
 }
 
+/* Grid container for card stacks - responsive layout */
+.mtg-visual-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 1rem;
+}
+
 .card-stack {
-    float:left;
-    padding: 10px;
     position: relative;
-    width:262px;
+    height: clamp(300px, 40vw, 490px);
+    width: 100%;
+    max-width: 280px;
+    margin: 0 auto;
+    transition: z-index 0.2s ease;
 }
 
 .overview-card-image {
-    height: 350px;
-    position:absolute;
-    top:0px;
+    height: clamp(200px, 30vw, 350px);
+    width: auto;
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* Mobile: larger cards with moderate overlap within sections */
+@media (max-width: 768px) {
+    .mtg-visual-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem; /* Space between stacks */
+        margin-bottom: 3rem; /* Extra space to clear last stack's cards */
+        padding-bottom: 1rem; /* Additional padding for safety */
+    }
+
+    .card-stack {
+        height: 600px; /* Sufficient to contain cards: 120px offset + ~476px card height */
+        max-width: 100%;
+        overflow: visible; /* Allow full cards to display */
+        margin-bottom: 1rem; /* Extra spacing between stacks */
+    }
+
+    .card-stack:hover {
+        z-index: 100;
+    }
+
+    .overview-card-image {
+        height: auto; /* Maintain aspect ratio */
+        width: min(90vw, 340px); /* Wider cards on mobile, up to 340px */
+        max-width: 340px;
+    }
+
+    /* Ensure section headers have proper spacing and are never behind cards */
+    .card-body h4 {
+        margin-top: 2rem;
+        margin-bottom: 1rem;
+        clear: both;
+        position: relative;
+        z-index: 10; /* Ensure headers stay above cards */
+        background-color: var(--bs-body-bg, #fff); /* Match background */
+        padding: 0.5rem 0;
+    }
 }
 
 .overview-card-image:hover {
diff --git a/theme/templates/mtg_deck.html b/theme/templates/mtg_deck.html
index e28d33f..c55ae63 100644
--- a/theme/templates/mtg_deck.html
+++ b/theme/templates/mtg_deck.html
@@ -151,19 +151,19 @@ <h5 class="mb-0">Mana Curve</h5>
             <div class="card-body">
                 {% if ns.landcount > 0 %}
                 <h4>Lands <small class="text-muted">({{ ns.landcount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.lands %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -171,24 +171,23 @@ <h4>Lands <small class="text-muted">({{ ns.landcount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 {% if ns.creaturecount > 0 %}
                 <h4>Creatures <small class="text-muted">({{ ns.creaturecount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.creatures %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -196,24 +195,23 @@ <h4>Creatures <small class="text-muted">({{ ns.creaturecount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 {% if ns.iscount > 0 %}
                 <h4>Instants and Sorceries <small class="text-muted">({{ ns.iscount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.is %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -221,24 +219,23 @@ <h4>Instants and Sorceries <small class="text-muted">({{ ns.iscount }})</small><
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 {% if ns.othercount > 0 %}
                 <h4>Other Spells <small class="text-muted">({{ ns.othercount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in ns.other %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -246,23 +243,22 @@ <h4>Other Spells <small class="text-muted">({{ ns.othercount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
                 {% endif %}
 
                 <h4>Sideboard <small class="text-muted">({{ ns.sbcount }})</small></h4>
-                <div>
+                <div class="mtg-visual-grid">
                     {% for card in article.deck.sideboard|sort(attribute='name') %}
                         {% set full_stacks = (card.count // 4)|int %}
                         {% set remainder = card.count % 4 %}
                         {% for stack_num in range(full_stacks) %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(4) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
                         </div>
                         {% endfor %}
                         {% if remainder > 0 %}
-                        <div class="card-stack" style="height:490px">
+                        <div class="card-stack">
                             {% for i in range(remainder) %}
                             {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                             {% endfor %}
@@ -270,7 +266,6 @@ <h4>Sideboard <small class="text-muted">({{ ns.sbcount }})</small></h4>
                         {% endif %}
                     {% endfor %}
                 </div>
-                <div style="clear:both"></div>
             </div>
         </div>
     </div>