.case-study-feature-section {
	padding: 2rem 10.75rem;

	&>* {
		margin-bottom: 2rem;
	}

	.case-study-feature-headline {
		color: #003c46;
		font-family: "Lexend Deca";
		font-size: 32px;
		font-style: normal;
		font-weight: 400;
		line-height: 1;
		/* 100% */
	}

	.case-study-feature-cta a,
	.story-card a {
		border-radius: 16px;
		background: #fff;
		border: none;
		color: #003c46;
		font-family: "Lexend Deca";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 1.71;
		/* 171.429% */
		letter-spacing: 0.0143em;
		padding: 4px 29px 5px 17px;
		display: inline-block;
	}

	.case-study-feature-cta a {
		border: 1px solid #003c46;
	}

	.case-study-feature-cta a::after,
	.story-card a::after {
		content: "\e8e4";
		font-family: "Material Symbols Outlined";
		font-size: 1.4em;
		position: relative;
		top: 0.33rem;
		left: 0.5em;
		transition: all 0.2s ease-in-out;
		line-height: 0;
	}

	.case-study-feature-cta a:hover::after,
	.story-card a:hover::after {
		transition: all 0.2s ease-in-out;
		left: 1em;
	}

	.tii-card-slider-controls {
		display: flex;
		width: 100%;
		margin-bottom: 2rem;
		padding-right: 3rem;

		button:first-child {
			margin-right: 10px;
		}

		button {
			border-radius: 100%;
			border: 1px solid var(--color-petrol);
			background-color: var(--color-petrol);
			color: var(--color-white);
			width: 34px;
			height: 34px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		button:disabled,
		button[disabled] {
			background-color: var(--color-white);
			color: #b3c5c8;
			border: 1px solid #b3c5c8;
		}
	}

	.carousel-viewport {
		background-size: cover;
		color: white;
		background-position: center;
	}

	.carousel-stage {
		position: relative;
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.carousel-viewport {
		overflow: hidden;
		border-radius: 18px;
		flex: 1;
		min-width: 0;
	}

	.carousel-track {
		display: flex;
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.15, 1);
	}

	.story-card {
		padding: 2.75rem 2rem 2rem 2rem;
		min-width: 100%;
		border-radius: 18px;
		overflow: hidden;

		.story-card-text-container {
			position: relative;
			padding-left: 4rem;

			svg {
				position: absolute;
				top: 0;
				left: 0;
			}

			h3 {
				color: #fff;
				font-size: 26px;
				line-height: normal;
				margin-bottom: 1.5rem;
			}

			.story-card-author-name {
				color: #fff;
				font-size: 15px;
				font-weight: 700;
				line-height: normal;
				margin-bottom: 0;
			}

			.story-card-author-title {
				font-size: 15px;
				line-height: normal;
				margin-bottom: 2rem;
			}
		}

		.card-right {
			text-align: right;
		}
	}

	.floating-logo-area {
		width: 30%;
		position: relative;

		.case-study-feature-logo {
			width: 220px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			opacity: 0;
			transition: opacity 0.35s;
		}

		.case-study-feature-logo.active {
			opacity: 1;
		}
	}

	.carousel-dots {
		display: flex;
		justify-content: center;
		gap: 8px;

		.dot {
			background: #FFF;
			padding: 0;
			width: 8px;
			height: 8px;
			border-radius: 10px;
			border: 1px solid #000;
			cursor: pointer;
			transition:
				width 0.35s cubic-bezier(0.4, 0, 0.15, 1),
				background 0.35s;
		}

		.dot.active {
			width: 20px;
			background: #000;
		}
	}
}

@media (max-width: 1400px) {
	.case-study-feature-section {
		padding: 2rem 6rem;
	}
}

@media (max-width: 1100px) {
	.case-study-feature-section {
		padding: 2rem 3rem;
	}
}


@media (max-width: 880px) {
	.case-study-feature-section {
		.carousel-stage {
			flex-direction: column;
		}

		.carousel-viewport {
			width: 100%;
		}

		.floating-logo-area {
			width: 100%;
			height: 240px;
		}

		.case-study-feature-logo {
			width: 100% !important;
			height: 200px;

			img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				max-height: 200px;
			}
		}
	}
}

@media (max-width: 580px) {
	.case-study-feature-section {
		padding: 2rem 1.5rem;
	}
}

@media (max-width: 480px) {
	.case-study-feature-section {
		& .story-card {
			padding: 1.5rem;

			& .story-card-text-container {
				padding-left: 3rem;

				h3 {
					font-size: 22px;
				}

				svg {
					width: 30px;
				}
			}
		}
	}

}