/**
 * Side banners (skyscrapers) — fixed on both sides of the viewport.
 *
 * The container has no fixed width — it shrinks-to-fit the served creative
 * (160x600 or 300x600). With right:0 / left:0, that means the container is
 * always flush against the viewport edge regardless of which size is served.
 *
 * Hidden below 1690px (160x600 won't fit each margin) and capped at 300px
 * via max-width on the larger breakpoint so a wide creative can't overlap
 * the central content area.
 */

.hm-side-banner {
    display: none;
}

@media (min-width: 1690px) {
    .hm-side-banner {
        display: block;
        position: fixed;
        top: 50%;
        transform: translateY(-50%);
        height: 600px;
        max-width: 160px;
        z-index: 50;
        contain: layout style paint;
    }
    .hm-side-banner--right { right: 0; }
    .hm-side-banner--left  { left: 0; }
    .hm-side-banner .aso-zone {
        display: block;
        width: max-content;
        max-width: 100%;
        height: 100%;
    }
    .hm-side-banner iframe,
    .hm-side-banner img {
        display: block;
        margin: 0;
        max-width: 100%;
    }
}

@media (min-width: 1990px) {
    .hm-side-banner {
        max-width: 300px;
    }
}