.hero-slider {
	transform-style: preserve-3d;
	margin-bottom: 0;
}

.hero-slider figure {
	height: 564px;
}

.hero-slider figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-slider-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: rgb(3, 10, 10);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 100%);
	z-index: 2;
	pointer-events: none;
}

.hero-slider .swiper-actions {
	--position-elements: 4rem;
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	bottom: var(--position-elements, 0px);
	padding-left: var(--position-elements, 0px);
	padding-right: var(--position-elements, 0px);
	width: 100%;
	z-index: 2;
}

.hero-slider .swiper-actions .swiper-button-prev,
.hero-slider .swiper-actions .swiper-button-next {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(2px);
	border-radius: 9999px;
}

.hero-slider .swiper-actions .swiper-button-prev svg,
.hero-slider .swiper-actions .swiper-button-next svg {
	color: white;
}

.hero-slider .swiper-actions .swiper-pagination {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
}

.hero-slider .swiper-actions .swiper-pagination span {
	width: 12px;
	height: 4px;
	border-radius: 1000px;
	opacity: 0.7;
	background: var(--theme-color-palette-8, #fff);
	transition:
		width 640ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity 640ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slider .swiper-actions .swiper-pagination span.swiper-pagination-bullet-active {
	width: 32px;
	opacity: 1;
	transition:
		width 640ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
		opacity 640ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fix for using flex containers */
.gb-container:has(> .wp-block-lazyblock-hero-slider) {
	min-width: 0;
}

.hero-slider-content-overlay {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, 0);
	padding-top: var(--theme-section-padding, 0px);
	pointer-events: none;
}

.hero-slider-content-overlay > * {
	color: var(--theme-palette-color-8);
}

@media (max-width: 767px) {
	.hero-slider figure {
		height: 240px;
	}

	.hero-slider .swiper-actions {
		--position-elements: 2rem;
	}
}