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

style.css

@@ -379,14 +379,20 @@ body::before {
 .brands-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0;
     max-width: 1200px;
     margin: 0 auto;
-    background-image: url("asset/banner/1.png");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    transition: background-image 0.4s ease;
+}
+
+/* Full-width banner spanning both columns in the middle row */
+.brands-banner-img {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    width: 100%;
+    height: auto;
+    display: block;
+    z-index: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
 }
 
 .brand-card {
@@ -394,16 +400,20 @@ body::before {
     overflow: hidden;
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
+    grid-row: 1 / 4;
     text-decoration: none;
     cursor: pointer;
+    z-index: 1;
 }
 
 .brand-card--fine {
+    grid-column: 1;
     border-right: 1px solid var(--border);
 }
 
 .brand-card--lacueor {
-    /* inherits background from grid */
+    grid-column: 2;
 }
 
 .brand-card-header {
@@ -420,11 +430,6 @@ body::before {
     background: var(--lacueor-dark);
 }
 
-.brand-card-spacer {
-    flex: 1;
-    min-height: 280px;
-}
-
 .brand-card-footer {
     flex-shrink: 0;
     padding: 20px 52px 40px;
@@ -439,7 +444,7 @@ body::before {
     background: var(--lacueor-dark);
 }
 
-.brand-card-image {
+.brand-card-spacer {
     display: none;
 }