Fix: single banner as grid background, no duplicated images

- Banner is now a single CSS background-image on .brands-grid
  spanning both card columns (left half on FI-NE, right on LACUEOR)
- Cards only have header (above) + spacer + footer (below)
  with semi-transparent solid backgrounds for readability
- Dropdown changes the grid's background-image directly
- Removed per-card <img> elements (was showing image twice)
- Cleaned up orphaned CSS classes

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,7 +90,6 @@
                             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
@@ -101,12 +100,7 @@
                                 alt="[fi-ne] brand logo"
                             />
                         </div>
-                            <img
+                        <div class="brand-card-spacer" aria-hidden="true"></div>
-                                class="brand-card-image"
-                                src="asset/banner/1.png"
-                                alt="Brand banner"
-                                style="object-position: left;"
-                            />
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 Clean. Unisex. Uncompromisingly effective.<br />
@@ -121,7 +115,6 @@
                                 >
                             </span>
                         </div>
-                        </div>
                     </a>
 
                     <!-- LACUEOR (right half) -->
@@ -137,7 +130,6 @@
                             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
@@ -148,12 +140,7 @@
                                 alt="LACUEOR brand logo"
                             />
                         </div>
-                            <img
+                        <div class="brand-card-spacer" aria-hidden="true"></div>
-                                class="brand-card-image"
-                                src="asset/banner/1.png"
-                                alt="Brand banner"
-                                style="object-position: right;"
-                            />
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 From the quantum realm to your skin.<br />
@@ -168,7 +155,6 @@
                                 >
                             </span>
                         </div>
-                        </div>
                     </a>
 
                 </div>

script.js

@@ -37,19 +37,12 @@
 
   /* ── Banner image selector ──────────────────────────────── */
   var bannerPicker = document.getElementById("banner-picker");
-  var bannerImgs = document.querySelectorAll(".brand-card-image");
+  var brandsGrid = document.getElementById("brands-grid");
-  if (bannerPicker && bannerImgs.length) {
+  if (bannerPicker && brandsGrid) {
     bannerPicker.addEventListener("change", function () {
       var val = this.value;
-      bannerImgs.forEach(function (img) {
+      brandsGrid.style.backgroundImage =
-        img.style.opacity = "0";
+        "url(asset/banner/" + val + ".png)";
-      });
-      setTimeout(function () {
-        bannerImgs.forEach(function (img) {
-          img.src = "asset/banner/" + val + ".png";
-          img.style.opacity = "1";
-        });
-      }, 200);
     });
   }
 })();

style.css

@@ -382,25 +382,11 @@ body::before {
     gap: 0;
     max-width: 1200px;
     margin: 0 auto;
-}
+    background-image: url("asset/banner/1.png");
-
+    background-size: cover;
-.brand-card-image-wrap {
+    background-position: center;
-    display: flex;
+    background-repeat: no-repeat;
-    flex-direction: column;
+    transition: background-image 0.4s ease;
-    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;
 }
 
 .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;
+    display: none;
-    width: 100%;
-    height: auto;
-    flex-shrink: 0;
-    object-fit: cover;
-    transition: opacity 0.4s ease;
 }
 
 .brand-card-top-accent {