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

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)";
     });
   }
 })();