/* CMS rules can force both Page Builder variants to display. Keep one image. */
.pagebuilder-mobile-only { display: none !important; }
#html-body main figure[data-content-type="image"] img.pagebuilder-mobile-only {
    display: none !important;
}

/* Reserve the source artwork's proportions for category navigation banners. */
#html-body:is(.cms-index-index, .catalog-category-view) main .pagebuilder-column:has(.block-category-link, .block-category-link-inline) {
    --vitcas-banner-ratio: 855 / 400;
    min-height: 0 !important;
}
#html-body:is(.cms-index-index, .catalog-category-view) main .pagebuilder-column:is(.baner-products, .baner-applications, .baner-calculator) {
    --vitcas-banner-ratio: 855 / 200;
}
#html-body:is(.cms-index-index, .catalog-category-view) main .pagebuilder-column:has(.block-category-link, .block-category-link-inline) > figure[data-content-type="image"] {
    position: relative;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0;
    aspect-ratio: var(--vitcas-banner-ratio);
    overflow: hidden;
}
#html-body:is(.cms-index-index, .catalog-category-view) main .pagebuilder-column:has(.block-category-link, .block-category-link-inline) > figure[data-content-type="image"] > a {
    position: absolute;
    inset: 0;
    display: block;
}
#html-body:is(.cms-index-index, .catalog-category-view) main .pagebuilder-column:has(.block-category-link, .block-category-link-inline) > figure[data-content-type="image"] img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

@media (max-width: 767px) {
    .pagebuilder-mobile-only { display: block !important; }
    .pagebuilder-mobile-hidden { display: none !important; }
    #html-body main figure[data-content-type="image"] img.pagebuilder-mobile-only {
        display: block !important;
    }
    #html-body main figure[data-content-type="image"] img.pagebuilder-mobile-hidden {
        display: none !important;
    }
}