#scrolly {
	position: relative;
	display: grid;
	padding: 1rem;
	margin-top: 72px;

	@media (min-width: 56rem) {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}

#scrolly article {
	position: relative;
	grid-column: span 5 / span 5;
	padding:0;
}

#scrolly .step:last-child {
	margin-bottom: 0;
}

#image-container {
	position: -webkit-sticky;
	position: sticky;
	grid-column: span 6 / span 6;
}
#scrolly .step-image {
	display: none; /* Hide all images by default */
	width: 100%; /* Adjust as needed */
	height: auto;
}

#scrolly .step-image.is-active {
	display: block; /* Show only the active image */
}

#scrolly .step {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

#scrolly .step.fade-in {
	opacity: 1;
	visibility: visible;
}

#scrolly .step.fade-out {
	opacity: 0;
	visibility: hidden;
}
#scrolly .sticky {
	top:50% !important:
}