.tcm-srl-wrapper {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 60px;
}

/* The image column is first in the DOM (see widget render()), so by
   default it sits on the left. These rules make both position options
   explicit rather than relying on default source order. */
.tcm-srl-image-position-left .tcm-srl-images {
	order: -1;
}

.tcm-srl-image-position-right .tcm-srl-images {
	order: 1;
}

.tcm-srl-images {
	position: sticky;
	top: 100px;
	flex: 0 0 45%;
	height: 600px;
	pointer-events: none;
}

.tcm-srl-image {
	position: absolute;
	width: 280px;
	height: 350px;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.9);
	transition-property: opacity, transform;
	transition-duration: 0.6s;
	transition-timing-function: ease;
}

.tcm-srl-image.active {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Blur transition mode: no movement/scale pop, just a blur-in cross-fade.
   Enabled via the "Use Blur Transition" style control. */
.tcm-srl-blur-transition-yes .tcm-srl-image {
	--tcm-srl-blur: 20px;
	transform: translate(-50%, -50%);
	filter: blur(var(--tcm-srl-blur));
	transition-property: opacity, filter;
}

.tcm-srl-blur-transition-yes .tcm-srl-image.active {
	transform: translate(-50%, -50%);
	filter: blur(0);
}

.tcm-srl-items {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 60px;
}

.tcm-srl-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0.4;
	transform: scale(0.92);
	transform-origin: left center;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.tcm-srl-item.active {
	opacity: 1;
	transform: scale(1.08);
}

.tcm-srl-title {
	font-size: clamp(24px, 3.5vw, 40px);
	line-height: 1.15;
	font-weight: 500;
	color: #111;
}

.tcm-srl-desc {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(17, 17, 17, 0.6);
}

@media (max-width: 900px) {
	.tcm-srl-wrapper {
		flex-direction: column;
	}

	.tcm-srl-hide-images-mobile-yes .tcm-srl-images {
		display: none;
	}

	.tcm-srl-images {
		position: static;
		flex-basis: auto;
		width: 100%;
		height: 320px;
		margin-bottom: 20px;
	}

	.tcm-srl-item {
		opacity: 1;
		transform: scale(1) !important;
	}
}