diff --git a/index.html b/index.html
index 9c48687..ab255c8 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
                     experience.
                 </p>
 
-                <div class="brands-grid" role="list">
+                <div class="brands-grid" role="list" id="brands-grid">
 
                     <!-- FI-NE (left half) -->
                     <a
@@ -90,37 +90,30 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <div class="brand-card-image-wrap">
-                            <div class="brand-card-header">
-                                <span class="brand-card-eyebrow"
-                                    >Premium Natural Cosmetics</span
-                                >
-                                <img
-                                    class="brand-card-logo"
-                                    src="asset/Fine.svg"
-                                    alt="[fi-ne] brand logo"
-                                />
-                            </div>
+                        <div class="brand-card-header">
+                            <span class="brand-card-eyebrow"
+                                >Premium Natural Cosmetics</span
+                            >
                             <img
-                                class="brand-card-image"
-                                src="asset/banner/1.png"
-                                alt="Brand banner"
-                                style="object-position: left;"
+                                class="brand-card-logo"
+                                src="asset/Fine.svg"
+                                alt="[fi-ne] brand logo"
                             />
-                            <div class="brand-card-footer">
-                                <span class="brand-card-tagline">
-                                    Clean. Unisex. Uncompromisingly effective.<br />
-                                    Made in Germany.
-                                </span>
-                                <span class="brand-card-cta">
-                                    finecosmetic.de
-                                    <span
-                                        class="brand-card-cta-arrow"
-                                        aria-hidden="true"
-                                        >&#8594;</span
-                                    >
-                                </span>
-                            </div>
+                        </div>
+                        <div class="brand-card-spacer" aria-hidden="true"></div>
+                        <div class="brand-card-footer">
+                            <span class="brand-card-tagline">
+                                Clean. Unisex. Uncompromisingly effective.<br />
+                                Made in Germany.
+                            </span>
+                            <span class="brand-card-cta">
+                                finecosmetic.de
+                                <span
+                                    class="brand-card-cta-arrow"
+                                    aria-hidden="true"
+                                    >&#8594;</span
+                                >
+                            </span>
                         </div>
                     </a>
 
@@ -137,37 +130,30 @@
                             class="brand-card-top-accent"
                             aria-hidden="true"
                         ></div>
-                        <div class="brand-card-image-wrap">
-                            <div class="brand-card-header">
-                                <span class="brand-card-eyebrow"
-                                    >Premium Organic Skin Care</span
-                                >
-                                <img
-                                    class="brand-card-logo"
-                                    src="asset/Lacueor.svg"
-                                    alt="LACUEOR brand logo"
-                                />
-                            </div>
+                        <div class="brand-card-header">
+                            <span class="brand-card-eyebrow"
+                                >Premium Organic Skin Care</span
+                            >
                             <img
-                                class="brand-card-image"
-                                src="asset/banner/1.png"
-                                alt="Brand banner"
-                                style="object-position: right;"
+                                class="brand-card-logo"
+                                src="asset/Lacueor.svg"
+                                alt="LACUEOR brand logo"
                             />
-                            <div class="brand-card-footer">
-                                <span class="brand-card-tagline">
-                                    From the quantum realm to your skin.<br />
-                                    Made in Berlin &amp; Brandenburg with love.
-                                </span>
-                                <span class="brand-card-cta">
-                                    lacueor.com
-                                    <span
-                                        class="brand-card-cta-arrow"
-                                        aria-hidden="true"
-                                        >&#8594;</span
-                                    >
-                                </span>
-                            </div>
+                        </div>
+                        <div class="brand-card-spacer" aria-hidden="true"></div>
+                        <div class="brand-card-footer">
+                            <span class="brand-card-tagline">
+                                From the quantum realm to your skin.<br />
+                                Made in Berlin &amp; Brandenburg with love.
+                            </span>
+                            <span class="brand-card-cta">
+                                lacueor.com
+                                <span
+                                    class="brand-card-cta-arrow"
+                                    aria-hidden="true"
+                                    >&#8594;</span
+                                >
+                            </span>
                         </div>
                     </a>
 
diff --git a/script.js b/script.js
index 1c85617..19c55db 100644
--- a/script.js
+++ b/script.js
@@ -37,19 +37,12 @@
 
   /* ── Banner image selector ──────────────────────────────── */
   var bannerPicker = document.getElementById("banner-picker");
-  var bannerImgs = document.querySelectorAll(".brand-card-image");
-  if (bannerPicker && bannerImgs.length) {
+  var brandsGrid = document.getElementById("brands-grid");
+  if (bannerPicker && brandsGrid) {
     bannerPicker.addEventListener("change", function () {
       var val = this.value;
-      bannerImgs.forEach(function (img) {
-        img.style.opacity = "0";
-      });
-      setTimeout(function () {
-        bannerImgs.forEach(function (img) {
-          img.src = "asset/banner/" + val + ".png";
-          img.style.opacity = "1";
-        });
-      }, 200);
+      brandsGrid.style.backgroundImage =
+        "url(asset/banner/" + val + ".png)";
     });
   }
 })();
diff --git a/style.css b/style.css
index 10a7781..d149975 100644
--- a/style.css
+++ b/style.css
@@ -382,25 +382,11 @@ body::before {
     gap: 0;
     max-width: 1200px;
     margin: 0 auto;
-}
-
-.brand-card-image-wrap {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-}
-
-.brand-card-header {
-    flex-shrink: 0;
-    padding: 32px 52px 20px;
-    text-align: center;
-}
-
-.brand-card-footer {
-    flex-shrink: 0;
-    padding: 20px 52px 40px;
-    text-align: center;
+    background-image: url("asset/banner/1.png");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: background-image 0.4s ease;
 }
 
 .brand-card {
@@ -413,21 +399,48 @@ body::before {
 }
 
 .brand-card--fine {
-    background: var(--fine-beige);
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
+    /* inherits background from grid */
+}
+
+.brand-card-header {
+    flex-shrink: 0;
+    padding: 32px 52px 20px;
+    text-align: center;
+}
+
+.brand-card--fine .brand-card-header {
+    background: var(--fine-beige);
+}
+
+.brand-card--lacueor .brand-card-header {
+    background: var(--lacueor-dark);
+}
+
+.brand-card-spacer {
+    flex: 1;
+    min-height: 280px;
+}
+
+.brand-card-footer {
+    flex-shrink: 0;
+    padding: 20px 52px 40px;
+    text-align: center;
+}
+
+.brand-card--fine .brand-card-footer {
+    background: var(--fine-beige);
+}
+
+.brand-card--lacueor .brand-card-footer {
     background: var(--lacueor-dark);
 }
 
 .brand-card-image {
-    display: block;
-    width: 100%;
-    height: auto;
-    flex-shrink: 0;
-    object-fit: cover;
-    transition: opacity 0.4s ease;
+    display: none;
 }
 
 .brand-card-top-accent {