:is(.banner-hover-background,.banner-hover-border) {
    backface-visibility: hidden
}

    :is(.banner-hover-background,.banner-hover-border) .banner-image {
        transition: transform 1s cubic-bezier(0, 0, 0.44, 1.18)
    }

    :is(.banner-hover-background,.banner-hover-border):hover .banner-image {
        transform: scale(1.09)
    }

:is(.banner-hover-background:not(.banner-background),.banner-hover-border:not(.banner-border)) .wrapper-content-banner {
    overflow: hidden;
    padding: 40px
}

    :is(.banner-hover-background:not(.banner-background),.banner-hover-border:not(.banner-border)) .wrapper-content-banner:after {
        content: "";
        position: absolute;
        inset: 20px;
        z-index: 2;
        opacity: 0;
        border-radius: var(--wd-brd-radius);
        transition: transform 0.35s cubic-bezier(0.05, 0.2, 0.1, 1),opacity 0.35s cubic-bezier(0.05, 0.2, 0.1, 1);
        transform: scale(0.5);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden
    }

:is(.banner-hover-background:not(.banner-background),.banner-hover-border:not(.banner-border)) .content-banner {
    z-index: 4
}

:is(.banner-hover-background:not(.banner-background),.banner-hover-border:not(.banner-border)):hover .wrapper-content-banner:after {
    opacity: 1;
    transform: scale(1)
}

:is(.banner-hover-background.banner-border,.banner-hover-border.banner-background) .wrapper-content-banner {
    padding: 30px
}

    :is(.banner-hover-background.banner-border,.banner-hover-border.banner-background) .wrapper-content-banner:after {
        inset: 0
    }

.banner-hover-background:not(.banner-background) .wrapper-content-banner:after {
    background-color: rgba(var(--bgcolor-white-rgb), 0.9)
}

.banner-hover-border:not(.banner-border) .wrapper-content-banner:after {
    /*border: 5px solid var(--brdcolor-gray-400)*/
}