
.promo-banner {
	--button-space: 15px;
	--button-size: 28px;
	--content-width: var(--wd-max-width);
	position: relative;
	overflow: hidden;
	border-radius: var(--wd-brd-radius);
	transform: translate3d(0, 0, 0);
}

.promo-banner .banner-image :is(img, picture, video) {
	width: 100%;
	height: var(--wd-img-height);
	object-fit: cover;
	object-position: inherit;
}

.promo-banner .banner-image[style^="height"] :is(img, picture) {
	height: 100%;
}

.promo-banner .wrapper-content-banner {
	z-index: 2;
	display: flex;
	overflow: hidden;
	padding: 30px;
	border-radius: var(--wd-brd-radius);
	transform: translate3d(0, 0, 0);
}

.promo-banner .content-banner {
	--wd-tags-mb: 10px;
	position: relative;
	width: 100%;
	max-width: var(--content-width);
}

.promo-banner :is(.banner-subtitle, .banner-title, .banner-inner):not(:first-child) {
	margin-top: 7px;
}

.promo-banner .banner-title {
	display: block;
	margin-bottom: 0;
	line-height: 1.3;
}

.promo-banner .banner-inner p:first-child:empty {
	display: none;
}

.promo-banner .wd-countdown-timer {
	margin-top: 10px;
}

.promo-banner .banner-btn-wrapper {
	margin-top: var(--button-space);
}

.promo-banner.wd-with-link .wrapper-content-banner {
	pointer-events: none;
}

.promo-banner.wd-with-link:hover .btn {
	pointer-events: auto;
}

.wd-bg-position-top {
	background-position: center top;
	object-position: center top;
}

.wd-bg-position-bottom {
	background-position: center bottom;
	object-position: center bottom;
}

.wd-bg-position-left {
	background-position: left center;
	object-position: left center;
}

.wd-bg-position-right {
	background-position: right center;
	object-position: right center;
}

.wd-bg-position-center {
	background-position: center;
	object-position: center;
}

.banner-increased-padding .wrapper-content-banner {
	padding: 7%;
}

@media (max-width: 1024px) {
	.banner-subtitle:is(.wd-fontsize-s, .wd-fontsize-m) {
		font-size: 14px;
	}
	
	.banner-title:is(.wd-fontsize-xl, .wd-font-size-xxl) {
		font-size: 22px;
	}
}

@media (max-width: 768.98px) {
	.banner-btn-wrapper :is(.btn-size-default, .btn-size-large, .btn-size-extra-large) {
		padding: 5px 14px;
		min-height: 36px;
		font-size: 12px;
	}
	
	.banner-btn-wrapper .btn-style-link {
		padding: 0;
		min-height: unset;
	}
}

@media (max-width: 767px) {
	.promo-banner .banner-subtitle {
		font-size: 3vw;
	}
	
	.promo-banner .banner-title {
		font-size: 5vw;
	}
}
