.split {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--s-sm);

	@media (min-width: 768px) {
		z-index: 1;
		row-gap: var(--s-md);
		column-gap: var(--s-lg);
	}

	&.mod-text-align-center {
		align-items: center;
	}

	> header {
		width: 100%;
	}

	> img {
		width: 100%;
	}

	&.mod-image-fit-cover > img {
		object-fit: cover;
		border-top-left-radius: var(--s-lg);
		border-bottom-right-radius: var(--s-lg);

		@media (max-width: 767px) {
			max-height: 35vh;
		}

		@media (min-width: 768px) {
			max-height: 90vh;
			margin-bottom: calc(-2 * var(--s-lg));
			outline: var(--s-sm) solid var(--c-white);
			aspect-ratio: 3 / 4;
		}
	}

	&.mod-image-width-sm > img {
		@media (min-width: 768px) {
			width: calc(40% - var(--s-md));
		}
	}

	&.mod-image-width-md > img {
		@media (min-width: 768px) {
			width: calc(50% - var(--s-md));
		}
	}

	> div {
		width: 100%;

		@media (min-width: 768px) {
			display: flex;
			flex-direction: column;
			width: calc(50% - var(--s-md));
			margin-top: var(--s-sm);
		}

		> div {
			max-width: var(--w-lg);
		}

		> nav {
			display: flex;
			justify-content: center;
			margin-top: var(--s-sm);
		}
	}

	&.mod-image-width-md > div {
		@media (min-width: 768px) {
			width: calc(50% - var(--s-md));
		}
	}

	&.mod-image-width-sm > div {
		@media (min-width: 768px) {
			width: calc(60% - var(--s-md));
		}
	}

	&.mod-text-align-center > div {
		text-align: center;
	}
}

section:has(> .split.mod-image-fit-cover) + section > div {
	@media (min-width: 768px) {
		padding-top: calc(2 * var(--s-lg));
	}
}