/* Keep mobile sidebar banner cards as wide as the rendered banner image. */
@media screen and (max-width: 1000px) {
    body.blog .rm-blog-banner-column .banner-carousel,
    body.blogdetails .rm-blog-banner-column .banner-carousel {
        flex: 0 1 auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* Ensure cached mobile views use a card that hugs the complete banner image. */
@media screen and (max-width: 1000px) {
    body.blog .rm-blog-banner-column .banner-carousel,
    body.blogdetails .rm-blog-banner-column .banner-carousel {
        display: block !important;
        box-sizing: border-box !important;
        flex: 0 1 auto !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

/* Size homepage banner frames to the displayed image. */
body.home .layoutkolommenboven .banner-carousel { width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
body.home .layoutkolommenboven .banner-carousel .banner-slide, body.home .layoutkolommenboven .banner-carousel .banner-slide a { width: fit-content !important; max-width: 100% !important; }
body.home .layoutkolommenboven .banner-carousel .banner-slide img { width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; }

body.home .rm-home-sidebar-banners .banner-carousel { display: table !important; width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }
body.home .rm-home-sidebar-banners .banner-carousel .banner-slide, body.home .rm-home-sidebar-banners .banner-carousel .banner-slide a { width: fit-content !important; max-width: 100% !important; }
body.home .rm-home-sidebar-banners .banner-carousel .banner-slide img { width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; }

/* Homepage banner rail: 10px extra space below the navigation. */
@media screen and (min-width: 1001px) { body.home.home .inhoudvak1 > .content.rowsection.section.gelijk > .rm-home-sidebar-banners { top: calc(var(--rm-fixed-menu-height, 107px) + 58px) !important; } }
