.web-stories .web-stories__link {
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	max-width: clamp(6.25rem, 5.7954545455rem + 2.2727272727vw, 7.5rem);
}

.web-stories .web-stories__link.web-stories__link--viewed {
	opacity: 0.6;
}

.web-stories .web-stories__link.web-stories__link--viewed .web-stories__image {
	border: none;
	box-shadow: inset 0px 0px 0px 4px #ffffff;
}

.web-stories .web-stories__image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 80px;
	width: clamp(5rem, 4.5455rem + 2.2727vw, 6.25rem);
	height: 80px;
	height: clamp(5rem, 4.5455rem + 2.2727vw, 6.25rem);
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: inset 0px 0px 0px 2px #0b62fd, inset 0px 0px 0px 4px #ffffff;
	/* filter: drop-shadow(0px 3px 12px rgba(165, 165, 165, 0.45)); */
	padding: 2px;
	overflow: hidden;
}

.web-stories .web-stories__image img {
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
}

.web-stories .web-stories__title {
	font-size: 12px;
	line-height: 14px;
	font-weight: 700;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-align: center;
}

/* .web-stories .swiper-container .web-stories-swiper {
	padding: 10px;
	margin: -10px;
} */

.web-stories .swiper-container .swiper-nav.nav-circle.swiper-prev {
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.web-stories .swiper-container .swiper-nav.nav-circle.swiper-next {
	-webkit-transform: translate(50%, -50%);
	-ms-transform: translate(50%, -50%);
	transform: translate(50%, -50%);
}

.web-stories .swiper-container .swiper-nav.nav-circle::before {
	width: 48px;
	height: 140px;
	transform: translateY(-38%);
}

/* Placeholder Animation */
@keyframes shimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

.web-stories .web-stories__slide--loading {
	--background-color: #f6f7f9;
	--gradient-color-start: #edeef2;
	--gradient-color-end: #f6f7f9;
}

.web-stories .web-stories__image.loading-placeholder,
.web-stories .web-stories__title.loading-placeholder {
	position: relative;
	overflow: hidden;
	background: var(--background-color);
	background-image: linear-gradient(
		to right,
		var(--background-color) 0%,
		var(--gradient-color-start) 20%,
		var(--background-color) 40%,
		var(--gradient-color-end) 100%
	);
	background-repeat: no-repeat;
	background-size: 800px 400px;
	animation: shimmer 1.5s linear infinite forwards;
}

.web-stories .web-stories__image.loading-placeholder {
	border: none;
	filter: none;
	box-shadow: none;
}

.web-stories .web-stories__title.loading-placeholder {
	width: 100%;
	height: 28px;
	border-radius: 4px;
}

@media (max-width: 599px) {
	.web-stories .swiper-container .swiper {
		margin-right: -20px;
		margin-right: clamp(
			-3.125rem,
			-0.5681818182rem - 3.4090909091vw,
			-1.25rem
		);
		margin-left: -20px;
		margin-left: clamp(
			-3.125rem,
			-0.5681818182rem - 3.4090909091vw,
			-1.25rem
		);
		padding-right: 20px;
		padding-right: clamp(
			1.25rem,
			0.5681818182rem + 3.4090909091vw,
			3.125rem
		);
		padding-left: 20px;
		padding-left: clamp(
			1.25rem,
			0.5681818182rem + 3.4090909091vw,
			3.125rem
		);
	}

	.web-stories .swiper-container .swiper-nav {
		display: none;
	}

	.web-stories .web-stories__link {
		align-items: flex-start;
	}

	.web-stories .web-stories__title {
		text-align: start;
	}
}

.web-stories-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.web-stories-lightbox amp-story-player {
	height: 100%;
	width: 100%;
}