Show banner at full width with natural aspect ratio

- Banner is now a real <img> in a full-width grid row (grid-column: 1/-1, grid-row: 2)
  between the card header (row 1) and footer (row 3)
- Cards span all 3 rows with justify-content: space-between
- image width: 100%; height: auto; preserves natural 1584x672 aspect ratio
- pointer-events: none so clicks pass through to cards
- z-index: 0 on banner, z-index: 1 on cards
- Dropdown swaps img src directly

script.js

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