: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, .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 .35s cubic-bezier(.05, .2, .1, 1), opacity .35s cubic-bezier(.05, .2, .1, 1);
	transform: scale(.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), .9);
}

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