/* alterevolvelisting — Lot F.3 listing banners (Sitewide V1).
 *
 * The .ael-banners-wrap container is rendered by hookDisplayContentWrapperTop
 * with `hidden` so the page paints without a flash ; banners.js lifts the
 * children into .products at the configured position then removes the
 * `hidden` attribute. When JS is disabled the banners stay hidden — a safe
 * MVP fallback that preserves the legacy listing.
 *
 * Each `.ael-banner` is a CSS grid item ; size 2/4 banners span 2/4
 * product-tile columns via `grid-column: span N`. classic-child renders
 * `.products` as a CSS grid with `repeat(auto-fill, minmax(220px, 1fr))`
 * (cf themes/classic-child/_dev/css/category.scss) so the spans work out
 * naturally. The aspect-ratio keeps banners visually consistent with
 * adjacent product cards.
 */

.ael-banners-wrap {
    display: contents;
}

.ael-banner {
    grid-column: span 1;
    margin: 0 0 1rem 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ael-banner--size-2 {
    grid-column: span 2;
}

.ael-banner--size-4 {
    grid-column: span 4;
}

@media (max-width: 768px) {
    .ael-banner--size-4 {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .ael-banner,
    .ael-banner--size-2,
    .ael-banner--size-4 {
        grid-column: span 1;
    }
}

.ael-banner__link {
    display: block;
    line-height: 0;
}

.ael-banner__img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
}