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

index.html

@@ -75,7 +75,15 @@
                     experience.
                 </p>
 
-                <div class="brands-grid" role="list" id="brands-grid">
+                <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
@@ -100,7 +108,6 @@
                                 alt="[fi-ne] brand logo"
                             />
                         </div>
-                        <div class="brand-card-spacer" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 Clean. Unisex. Uncompromisingly effective.<br />
@@ -140,7 +147,6 @@
                                 alt="LACUEOR brand logo"
                             />
                         </div>
-                        <div class="brand-card-spacer" aria-hidden="true"></div>
                         <div class="brand-card-footer">
                             <span class="brand-card-tagline">
                                 From the quantum realm to your skin.<br />