.celotto-media-stage {
	background: var(--celotto-green-dark);
	color: var(--celotto-stone);
	min-height: min(76rem, 86svh);
	overflow: hidden;
	position: relative;
}

.celotto-media-stage__figure {
	display: grid;
	grid-template-areas: "media";
	margin: 0;
	min-height: inherit;
}

.celotto-media-stage__frame,
.celotto-media-stage__caption {
	grid-area: media;
}

.celotto-media-stage__frame {
	background: var(--celotto-green-dark);
	overflow: hidden;
	position: relative;
}

.celotto-media-stage__frame::after,
.celotto-media-split__frame::after {
	background: linear-gradient(100deg, rgba(21, 39, 34, 0.76), transparent 58%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.celotto-media-stage img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.celotto-media-stage__caption {
	align-self: end;
	display: grid;
	gap: 0.7rem;
	padding: clamp(2rem, 6vw, 6rem) var(--celotto-pad);
	position: relative;
	z-index: 1;
}

.celotto-media-stage__caption p:not(.celotto-media-stage__label) {
	font-family: var(--celotto-serif);
	font-size: clamp(2rem, 6vw, 5.8rem);
	letter-spacing: -0.045em;
	line-height: 0.96;
	margin: 0;
	max-width: 13ch;
}

.celotto-media-stage__label {
	color: #f1ca8d;
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.celotto-media-split__inner {
	align-items: center;
	display: grid;
	gap: clamp(2.5rem, 8vw, 8rem);
	grid-template-columns: minmax(0, 0.82fr) minmax(18rem, 0.72fr);
}

.celotto-media-split__copy {
	display: grid;
	gap: 1.5rem;
}

/*
 * Paragraphs keep the spacing they had as plain HTML. The section class
 * outweighs the flow layout rule for first children.
 */
.celotto-media-split .celotto-media-split__copy > p {
	margin-block: 1em;
}

.celotto-media-split__figure {
	margin: 0;
}

.celotto-media-split__frame {
	aspect-ratio: 4 / 5;
	background: #d9d2c4;
	overflow: hidden;
	position: relative;
}

.celotto-media-split__frame::after {
	background: linear-gradient(180deg, transparent 66%, rgba(21, 39, 34, 0.28));
}

.celotto-media-split img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.celotto-media-split__caption {
	color: var(--celotto-grey);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	margin-top: 0.7rem;
	text-transform: uppercase;
}

/* The motion script only adds these states when JavaScript and motion are allowed. */
.celotto-motion-ready .celotto-media-stage__frame,
.celotto-motion-ready .celotto-media-split__frame {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.celotto-motion-ready .celotto-media-stage img,
.celotto-motion-ready .celotto-media-split img {
	transform: scale(1.035);
	transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.celotto-motion-ready :is(.celotto-media-stage, .celotto-media-split).is-visible :is(.celotto-media-stage__frame, .celotto-media-split__frame) {
	clip-path: inset(0);
}

.celotto-motion-ready :is(.celotto-media-stage, .celotto-media-split).is-visible img {
	transform: scale(1);
}

@media (max-width: 782px) {
	.celotto-media-stage {
		min-height: 68svh;
	}

	.celotto-media-stage img {
		object-position: 61% center;
	}

	.celotto-media-split__inner {
		grid-template-columns: 1fr;
	}

	.celotto-media-split__figure {
		margin-inline: auto;
		width: min(100%, 34rem);
	}

	.celotto-media-split__copy {
		order: 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.celotto-motion-ready .celotto-media-stage__frame,
	.celotto-motion-ready .celotto-media-split__frame {
		clip-path: none;
	}

	.celotto-motion-ready .celotto-media-stage img,
	.celotto-motion-ready .celotto-media-split img {
		transform: none;
	}
}