.success-stories {
	> .container {
		padding-block: var(--clamp-40-20);
	}

	> .container > .content {
		display: flex;
		flex-direction: column;
		gap: var(--clamp-40-20);

		.title {
			font-size: var(--clamp-48-28);
			font-weight: 800;
			line-height: 1.3;
			color: var(--black);
		}
	}

	.stories.swiper {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
	}

	.stories .swiper-wrapper {
		width: 100%;
	}

	.stories .swiper-slide {
		height: auto;
		display: flex;
		border-radius: var(--clamp-20-10);
		overflow: hidden;
		position: relative;

		.image {
			flex: 0 0 auto;
			object-fit: cover;
			border-radius: var(--clamp-20-10);
		}

		.content {
			display: flex;
			flex-direction: column;
			gap: var(--clamp-10-5);
			justify-content: space-between;
			padding: var(--clamp-20-10);
			background-color: var(--white);
			border-radius: var(--clamp-20-10);
			border: 1px solid var(--black-a20);
			margin-left: -60px;

			.quote {
				--quote-closed-height: calc(var(--clamp-18-14) * 1.3 * 3);

				font-size: var(--clamp-18-14);
				font-weight: 500;
				line-height: 1.3;
				color: var(--black);

				display: block;
				max-height: var(--quote-closed-height);
				overflow: hidden;
				transition: max-height 0.7s ease;

				&.is-ellipsis {
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
				}

				p {
					margin: 0;
				}
			}

			.author {
				display: flex;
				flex-direction: column;
				gap: 3px;

				.name {
					font-size: var(--clamp-18-14);
					font-weight: 700;
					color: var(--black);
				}

				.meta {
					font-size: var(--clamp-18-14);
					font-weight: 500;
					color: var(--black-a40);
				}
			}

			.button {
				margin-top: auto;
				justify-content: start;
				padding: 0;
				min-height: unset;
				font-size: var(--clamp-18-14);
				line-height: 1;
				font-weight: 500;
				color: var(--blue);
			}

			.link {
				display: none;
				font-size: var(--clamp-18-14);
				font-weight: 500;
				color: var(--blue);
			}
		}
	}
}

body::before {
	opacity: 0;
	transition: opacity 0.35s ease;
}
body:has(.story.popup.is-story-popup-open)::before {
	pointer-events: auto;
	opacity: 1;
	backdrop-filter: blur(3px);
	background-color: color-mix(in srgb, var(--white) 20%, transparent);
}

.story.popup {
	position: fixed;
	top: var(--story-y);
	left: var(--story-x);
	width: var(--story-w);
	height: var(--story-h);
	z-index: 1001;
	overflow: hidden;
	border-radius: var(--clamp-20-10);
	background-color: var(--white);
	pointer-events: auto;
	transition:
		top 0.7s ease,
		left 0.7s ease,
		width 0.7s ease,
		height 0.7s ease,
		box-shadow 0.7s ease;
}

.story.popup.is-active {
	top: var(--story-popup-y);
	left: var(--story-popup-x);
	width: var(--story-popup-w);
	height: var(--story-popup-h);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
}

.story.popup.is-closing {
	pointer-events: none;
}

.story.popup .image {
	position: absolute;
	top: var(--story-image-y);
	left: var(--story-image-x);
	z-index: 1;
	width: var(--story-image-w);
	height: var(--story-image-h);
	object-fit: cover;
	border-radius: var(--clamp-20-10);
	transition:
		top 0.7s ease,
		left 0.7s ease,
		width 0.7s ease,
		height 0.7s ease,
		opacity 0.7s ease;
}

.story.popup.is-active .image {
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
}

.story.popup .content {
	position: absolute;
	z-index: 2;
	top: 0;
	left: var(--story-content-x);
	bottom: 0;
	width: var(--story-content-w);
	height: 100%;
	margin-left: 0 !important;
	padding: var(--clamp-20-10);
	display: flex;
	flex-direction: column;
	gap: var(--clamp-10-5);
	background-color: var(--white);
	border: 1px solid var(--black-a20);
	border-radius: var(--clamp-20-10);
	transition:
		left 0.7s ease,
		width 0.7s ease;
}

.story.popup.is-active .content {
	left: 0;
	width: 100%;
}

.story.popup .quote {
	flex: 1 1 auto;
	min-height: 0;
	max-height: 999px;

	display: block;
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;

	overflow-y: auto;
	overflow-x: hidden;
	text-overflow: unset;

	font-size: var(--clamp-18-14);
	font-weight: 500;
	line-height: 1.3;
	color: var(--black);

	transition: max-height 0.7s ease;

	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.story.popup.is-clamping .quote {
	max-height: calc(var(--clamp-18-14) * 1.3 * 3);
	overflow: hidden;
}

.story.popup .quote::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.story.popup .quote p {
	margin: 0;
}

.story.popup .author {
	flex: 0 0 auto;
}

.story.popup .button {
	display: none;
}

.story.popup .link {
	margin-top: auto !important;
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 0;
	justify-content: start;
	padding: 0;
	min-height: unset;
	font-size: var(--clamp-18-14);
	line-height: 1;
	font-weight: 500;
	color: var(--blue);
}