.swiper-container-wrapper.swiper-pagination-on.swiper-style-hero{
	.main-swiper{
		padding: 0;
	}
	.swiper-horizontal > .swiper-pagination-bullets{
		position: absolute !important;
		z-index: 4;
		bottom: 32px;
		margin: 0;
	}
	.swiper-pagination-bullet{
		background: none;
		border-color: #fff;
	}
	.swiper-pagination-bullet-active{
		background-color: #fff;
		border-color: #fff;
	}
	.swiper-button-next{
		right: 80px;
	}
	.swiper-button-prev{
		left: 80px;
	}
	:is(.swiper-button-next, .swiper-button-prev){
		&::after,
		&:hover::after{
			background: #fff;
		}

		@media (max-width: 1499px){
			display: none;
		}
	}
	.hero-item{
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: min( 800px, 100dvh - 136px );
		padding: 48px 0 100px;

		@media (max-width: 767px){
			min-height: min( 600px, 100dvh - 80px );
		}

		&::before,
		&::after{
			content: '';
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 480px;
			height: 100%;
			background: linear-gradient( 90deg, rgba(0,0,0,.6), rgba(0,0,0,0) );
		}
		&::after{
			left: auto;
			right: 0;
			background: linear-gradient( -90deg, rgba(0,0,0,.6), rgba(0,0,0,0) );
		}
	}
	[data-vbg]{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	[data-desktop-video]{
		@media (max-width: 767px){
			display: none;
		}
	}
	[data-mobile-video]{
		display: none;

		@media (max-width: 767px){
			display: block;
		}
	}
	iframe, video{
		pointer-events: none;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
		min-width: 100%;
		min-height: 100%;
	}
	video{
		object-fit: cover;
	}
	.hero-background{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.container{
		position: relative;
		z-index: 3;
		color: #fff;
	}

	h1, h2, h3, h4, h5, h6{
		margin: 0 0 16px;
		color: #fff;
	}

	p a:only-child{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		padding: 16px 24px;
		background: none;
		border: 2px solid #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.1875;
		letter-spacing: 0.005em;
		color: #fff;
		text-transform: uppercase;
		text-decoration: none;
		transition: all .3s ease;
		transition-property: background-color, color;

		@media (max-width: 767px){
			font-size: 14px;
		}

		&:hover{
			background-color: #fff;
			color: var(--wp--preset--color--gray-60);
		}
	}
}