- 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
- 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
- Removed gradient overlays from brand cards
- Removed shared background banner approach
- Each card now has its own banner <img> showing the relevant half
(object-position: left for FI-NE, right for LACUEOR)
- Logo + eyebrow sit above the image, tagline + CTA below
- Dropdown now updates both card images simultaneously
- Cleaned up orphaned CSS (.brand-card-overlay, .brand-card-name, .brands-banner-img)
- Responsive padding for header/footer sections
- Removed individual Fine.webp / Lacuoer.jpg from brand cards
- Added shared banner image (asset/banner/1.png) spanning both cards
- Added dropdown selector (Banner 1–9) to switch the displayed image
- Made card backgrounds semi-transparent so the banner shows through
- Added hover zoom effect on the shared banner
- Preserved all brand links, overlays, and content layouts
Oliver
oliver