Fix: show banner full height + reliable dropdown

- Increased brand-card-gap min-height to 500px (desktop) so
  the full background image is visible (509px at 1200px grid width)
- Responsive: 400px at 960px, 240px at 600px
- Dropped grid-row spanning approach; back to CSS background-image
  on .brands-grid with background-size: 100% auto
- Dropdown sets backgroundImage directly on .brands-grid via
  style.backgroundImage — no setTimeout, no opacity animation,
  no async timing issues

index.html

@@ -77,14 +77,6 @@
 
                 <div class="brands-grid" role="list">
 
-                    <!-- Full-width banner between header and footer -->
-                    <img
-                        class="brands-banner-img"
-                        id="brands-banner-img"
-                        src="asset/banner/1.png"
-                        alt="Brand banner"
-                    />
-
                     <!-- FI-NE (left half) -->
                     <a
                         class="brand-card brand-card--fine"
@@ -108,6 +100,7 @@
                                 alt="[fi-ne] brand logo"
                             />
                         </div>
+                        <div class="brand-card-gap" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 Clean. Unisex. Uncompromisingly effective.<br />
@@ -147,6 +140,7 @@
                                 alt="LACUEOR brand logo"
                             />
                         </div>
+                        <div class="brand-card-gap" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 From the quantum realm to your skin.<br />