/* ========================================================================== Great Dubai — card media -------------------------------------------------------------------------- Loaded last in every , next to gd-global-font.css. Two jobs: 1. When a listing photo 404s and an onerror handler swaps in the logo (or any placeholder), show that placeholder WHOLE - centred and letterboxed - instead of letting the card's "zoom + crop" treatment slice it up. gd-media.js tags every image that failed to load with data-gd-fallback. 2. Keep card images inside their frame so nothing spills out of the card. ========================================================================== */ /* --- 1. placeholder / fallback images ------------------------------------ */ img[data-gd-fallback] { object-fit: contain !important; object-position: center center !important; width: 100% !important; height: 100% !important; max-width: 100% !important; transform: none !important; /* cancel the .car-image scale(1.18) */ background-color: #f4f5f7; padding: 10px; box-sizing: border-box; } /* the zoom-on-hover treatments must not re-apply to a placeholder either */ *:hover > img[data-gd-fallback], *:hover img[data-gd-fallback] { transform: none !important; } /* --- 2. card image frames must clip -------------------------------------- */ .car-image-wrapper, .car-image-link, .city-card, .brand-card-item, .new-car-card .car-image-wrapper, [class*="card"] > [class*="image"], [class*="card"] > [class*="img"], [class*="card"] > [class*="thumb"] { overflow: hidden !important; } /* an image should never be wider than the box that holds it */ [class*="card"] img, [class*="listing"] img, [class*="thumb"] img { max-width: 100%; }