.block--the-spots-slider {
	--swiper-pagination-color: transparent;
	--swiper-pagination-bullet-border-radius: 0%;
	--swiper-pagination-bullet-size: 100px;
	--swiper-pagination-bullet-width: 100px;
	--swiper-pagination-bullet-height: 100px;
	--swiper-pagination-bullet-inactive-color: transparent;
	--swiper-pagination-bullet-inactive-opacity: 0.5;
	--swiper-pagination-bullet-opacity: 1;
	--swiper-pagination-bullet-horizontal-gap: 40px;
	--swiper-pagination-bullet-vertical-gap: 6px;
}

@media screen and (max-width: 768px) {
	.block--the-spots-slider {
		--swiper-pagination-bullet-size: 90px;
		--swiper-pagination-bullet-width: 90px;
		--swiper-pagination-bullet-height: 90px;
		--swiper-pagination-bullet-horizontal-gap: 12px;
	}
}

.block--the-spots-slider .swiper {
	margin-top: 48px;
	overflow: visible;
}

.block--the-spots-slider .swiper .swiper-slide {
	padding: 24px;
	transition: background-color 1s ease;
}

.block--the-spots-slider .swiper .swiper-slide figure {
	aspect-ratio: 14 / 9;
}

@media screen and (max-width: 768px) {
	.block--the-spots-slider .swiper .swiper-slide figure {
		aspect-ratio: 3 / 4;
	}
}

.block--the-spots-slider .swiper .swiper-slide figure img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.block--the-spots-slider .swiper .swiper-slide figcaption {
	margin-top: 16px;
	font-weight: 500;
	opacity: 0;
}

.block--the-spots-slider .swiper .swiper-slide.swiper-slide-active {
	background-color: #e9e7de;
	transition: background-color 1s ease;
}

.block--the-spots-slider .swiper .swiper-slide.swiper-slide-active figcaption {
	opacity: 1;
}

.block--the-spots-slider .swiper-pagination {
	position: static;
	display: flex;
	justify-content: center;
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 768px) {
	.block--the-spots-slider .swiper-pagination {
		position: static;
		display: flex;
		justify-content: left;
		overflow-x: auto;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}
}

.block--the-spots-slider .swiper-pagination .swiper-pagination-bullet {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	color: inherit;
}

.tss-icon img {
	height: 62px;
	width: 62px;
	object-fit: contain;
	margin-bottom: 8px;
}

@media screen and (max-width: 768px) {
	.tss-icon img {
		height: 54px;
		width: 54px;
		object-fit: contain;
		margin-bottom: 8px;
	}
}

.tss-label {
	font-size: var(--wp--preset--font-size--intro);
	font-family: var(--wp--preset--font-family--rowan);
}

.block--the-spots-slider .swiper-pagination::-webkit-scrollbar {
	display: none; /* optional: hide scrollbar */
}

.swiper-pagination-bullet .tss-icon img {
	transform: scale(0.7);
	transform-origin: bottom center;
	transition: transform 0.3s ease, opacity 0.3s ease;
	opacity: 0.4;
}

@media screen and (max-width: 768px) {
	.swiper-pagination-bullet .tss-icon img {
		transform: scale(0.6);
		transform-origin: bottom center;
		transition: transform 0.3s ease, opacity 0.3s ease;
		opacity: 0.4;
	}
}

.swiper-pagination-bullet.swiper-pagination-bullet-active .tss-icon img {
	transform: scale(1);
	opacity: 1;
}