:root {
	--rotator-min-height: 500px;
	--rotator-nav-bottom: 25px;
	--rotator-nav-indicator-color: #fff;
	--rotator-nav-indicator-width: 16px;
	--rotator-nav-indicator-border-width: 3px;
	--rotator-display: 1;
    --rotator-gap: 50px;
}

.rotator-container {
	position: relative;
	min-height: var(--rotator-min-height);
	overflow: hidden;
	display: flex;
}


	.rotator-wrapper {

		position: relative;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		overflow: auto;
		scrollbar-width: none;
		scroll-snap-type: x mandatory;
		
		
		
	    --rotator-column-width: calc((100% - ((var(--rotator-display) - 1) * var(--rotator-gap))) / var(--rotator-display));

		display: grid;
	    grid-auto-flow: column;
	    gap: var(--rotator-gap);
	    grid-template-columns: repeat(var(--rotator-display), var(--rotator-column-width));
	    grid-auto-columns: var(--rotator-column-width);

	}
	
		.rotator-wrapper::-webkit-scrollbar {
			display: none;
		}
		
		.rotator-container > .rotator-control {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			display: none;
		}
		
			.rotator-container > .rotator-control.rotator-previous {
				left: calc(var(--left-right-padding, 0) / 2);
			}
			.rotator-container > .rotator-control.rotator-next {
				right: calc(var(--left-right-padding, 0) / 2);
			}

		.rotator-slide-container {
			position: relative;
			width: 100%;
			flex-shrink: 0;
			background-image: var(--rotator-slide-background-image);
			background-position: center center;
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			scroll-snap-align: start;
		}

		.rotator-container:not([data-no-overlay]) .rotator-slide-container::before {
			content: "";
			position: absolute;
			inset: 0;
			background-color: rgba(0,0,0,0.6);
		}

		.rotator-slide-content-container {
			position: relative;
			width: 80%;
			padding: 50px 0;
			display: grid;
			grid-template-columns: 1fr 2fr;
			gap: 40px;
			align-items: center;
		}
		
			.slide-no-image .rotator-slide-content-container,
			.slide-no-text .rotator-slide-content-container {
				grid-template-columns: 1fr;
			}
		
			.rotator-slide-image-container {
			}
			
				.rotator-slide-image-container img {
					width: 100%;
				}

			.rotator-slide-title-full-width {
				grid-column: 1 / -1;
				display: none;
			}

			.rotator-slide-title {
				font-size: 1.5em;
				padding-bottom: 1em;
			}

	.rotator-navigation {
		position: absolute;
		bottom: var(--rotator-nav-bottom);
		left: 0;
		right: 0;
		max-width: var(--rotator-max-width);
		padding: 0 var(--rotator-left-right-padding, 10px);
		margin: 0 auto;
		display: flex;
		justify-content: center;
		gap: 20px;
		z-index: 5;
	}

		.rotator-pagination-container {

			position: relative;
			margin: 0;
			padding: 0;
			list-style: none;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 16px;
		}

			.rotator-pagination-container li {

			}

				.rotator-slide-indicator {
					width: var(--rotator-nav-indicator-width);
					height: var(--rotator-nav-indicator-width);
					padding: 0;
					background-color: transparent;
					border: var(--rotator-nav-indicator-border-width) solid var(--rotator-nav-indicator-color);
					border-radius: 50%;
					display: block;
					cursor: pointer;
					background-color .3s;
				}

				.rotator-pagination-container li.active button.rotator-slide-indicator {
					background-color: var(--rotator-nav-indicator-color);
				}
				
				.rotator-slide-number {
					display: none;
				}

		.rotator-navigation .rotator-control[data-action] {
			position: relative;
			display: flex;
		}
		
			.rotator-control[data-action]::before {
				content: "";
				position: absolute;
				width: 50vw;
				height: 2px;
				/* margin-top: 1px; */
				background-color: var(--rotator-nav-indicator-color);
				top: 50%;
				display: none;
			}

				.rotator-control.rotator-previous::before {
					left: 0;
					transform: translate(calc(-100% - 15px), -50%);
				}

				
				.rotator-control.rotator-next::before {
					right: 0;
					transform: translate(calc(100% + 10px), -50%);
				}
				
				.rotator-control a {
					color: var(--rotator-nav-indicator-color);
					font-size: 12px;
					line-height: 1;
					text-decoration: none;
					display: flex;
					gap: 7px;
					align-items: center;
				}

					.rotator-control a span.arrow {
						transition: .3s;
					}

					.rotator-control.rotator-previous:hover a span.arrow {
						transform: translateX(-5px);
					}
					.rotator-control.rotator-next:hover a span.arrow {
						transform: translateX(5px);
					}


@media (min-width: 768px) {
	.rotator-container[data-show-nearby] {
		padding-bottom: 75px;
	}

		.rotator-container[data-show-nearby] .rotator-wrapper {
			overflow: hidden;
			scroll-snap-type: unset;
		}
		
			.rotator-container[data-show-nearby] .rotator-slide-container {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 38%;
				flex-shrink: 0;
				transform: translateX(-50%) translateY(-50%);
				transition: transform .5s ease, left .5s ease, opacity .5s ease;
				opacity: 0;
				aspect-ratio: 16/9;
				pointer-events: none;
			}
			
			.rotator-container[data-show-nearby] .rotator-slide-container.prev {
				opacity: 1;
				left: 0;
				transform: translateX(-30%) translateY(-50%) scale(0.9);
				z-index: 2;

			}
			
			.rotator-container[data-show-nearby] .rotator-slide-container.active {
				opacity: 1;
				left: 50%;
				transform: translateX(-50%) translateY(-50%) scale(1.1);
				z-index: 3;
			}
			
			.rotator-container[data-show-nearby] .rotator-slide-container.next {
				opacity: 1;
				left: 100%;
				transform: translateX(-70%) translateY(-50%) scale(0.9);
				z-index: 2;
			}
			
			.rotator-container[data-show-nearby] .rotator-slide-content-container {
				width: 100%;
			}
			
				.rotator-container[data-show-nearby] .rotator-slide-image-container {
					position: relative;
					height: 100%;
					display: block;
				}
				
					.rotator-container[data-show-nearby] .rotator-slide-container img {
						position: relative;
						height: 100%;
						object-fit: cover;
						display: block;
					}

}


@media (max-width: 900px) {
	:root {
		--rotator-nav-indicator-width: 12px;
		--rotator-nav-indicator-border-width: 2px;
	}
}

@media (max-width: 768px) {
	.rotator-slide-content-container {
		grid-template-columns: 1fr;
	}
}