/* =========================================================================
 * Content Split 001 — Photo Beside Words
 *
 * The block's own two-column grid, weighted 1.05 : 1 here. On paper; a
 * fading hairline across the container closes the section.
 * ========================================================================= */

.content-split-001 {
	position: relative;
	background: var(--color-background);
}

/* On ::before: the block editor draws its selection outline on a block's own
   ::after (stretched with inset: 0), and a decoration there turns the outline
   into this hairline. */
.content-split-001::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: min(100% - var(--gutter) * 2, var(--container-width));
	height: 1px;
	background: var(--fade-rule);
	transform: translateX(-50%);
	pointer-events: none;
}

.content-split-001 .content-split-001__inner {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	column-gap: 9%;
	align-items: center;
}

.content-split-001__photo.content-split-001__photo {
	margin: 0;
}

.content-split-001__photo img {
	display: block;
	width: 100%;
	border-radius: var(--radius);
	object-position: 45% center;
}

.content-split-001__copy > * {
	margin-block: 0;
}

.content-split-001__copy h2 {
	margin-block: var(--space-sm) var(--space-md);
}

.content-split-001__copy .is-muted {
	line-height: 1.85;
}

.content-split-001__copy .wp-block-buttons {
	margin-top: var(--space-md);
}

@media (max-width: 48rem) {
	.content-split-001 .content-split-001__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--space-lg);
	}

	/* Words first on a phone, as in the draft. */
	.content-split-001__copy {
		order: -1;
	}
}