.mb-sticky-scroll-swap__layout {
	display: flex;
	align-items: stretch;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Desktop/tablet only — swaps which side the sticky image column sits
   on. Mobile ignores this entirely (see the max-width: 900px block,
   which always stacks each text block's own image above its text
   regardless of this setting). */
.mb-sticky-scroll-swap__layout--image-left {
	flex-direction: row-reverse;
}

.mb-sticky-scroll-swap__text-column {
	width: 50%;
	box-sizing: border-box;
}

.mb-sticky-scroll-swap__block {
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 4rem;
	display: flex;
	align-items: center;
	/* Clips each block to its own box so the first block's entrance
	   transform (translateY(100vh), purely visual and layout-inert) can
	   never visually bleed into the next block's space -- without this,
	   scrolling up before/while that transform is mid-transition let the
	   first block's still-offset content paint on top of the second
	   block's text, reading as "mangled"/overlapping text. */
	overflow: hidden;
}

.mb-sticky-scroll-swap__block-inner {
	width: 100%;
	will-change: transform;
}

.mb-sticky-scroll-swap__block--first .mb-sticky-scroll-swap__block-inner {
	transform: translateY(100vh);
	transition: transform 700ms ease-out;
}

.mb-sticky-scroll-swap__block--first.mb-is-entered .mb-sticky-scroll-swap__block-inner {
	transform: translateY(0);
}

.mb-sticky-scroll-swap__block-image {
	display: none;
}

.mb-sticky-scroll-swap__block-heading {
	margin: 0 0 1rem;
}

.mb-sticky-scroll-swap__block-text {
	margin: 0;
}

.mb-sticky-scroll-swap__image-column {
	position: relative;
	width: 50%;
}

.mb-sticky-scroll-swap__sticky-frame {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

.mb-section .mb-sticky-scroll-swap__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

@media (max-width: 1100px) and (min-width: 901px) {
	.mb-sticky-scroll-swap__block {
		padding: 2.5rem 2rem;
	}
}

@media (max-width: 900px) {
	.mb-sticky-scroll-swap__layout {
		flex-direction: column;
	}

	.mb-sticky-scroll-swap__text-column {
		width: 100%;
	}

	/* The desktop sticky-swap effect (one shared image, pinned and
	   swapped via JS as each text block scrolls past) only makes sense
	   next to a wide 2-column layout. Stacked on mobile it becomes a
	   single image sitting below every text block, disconnected from
	   whichever block the user is actually reading. Below this
	   breakpoint each block shows its own image instead (see
	   .mb-sticky-scroll-swap__block-image below); the shared sticky
	   column is hidden entirely rather than adapted. */
	.mb-sticky-scroll-swap__image-column {
		display: none;
	}

	.mb-sticky-scroll-swap__block {
		min-height: 0;
		padding: 2rem 1.5rem;
		flex-direction: column;
		align-items: stretch;
	}

	.mb-sticky-scroll-swap__block-image {
		display: block;
		margin-bottom: 1.5rem;
		border-radius: var(--mb-radius);
		overflow: hidden;
	}

	.mb-sticky-scroll-swap__block-image-el {
		width: 100%;
		height: auto;
		display: block;
		object-fit: cover;
		aspect-ratio: 4 / 3;
	}

	.mb-sticky-scroll-swap__block--first .mb-sticky-scroll-swap__block-inner {
		transform: none;
		transition: none;
	}
}