.split-view {
	width: 100%;

	display: grid;
	grid-template-columns: subgrid;
	grid-column: screen !important;

	.split-view__half {
		flex-basis: 50%;
		container-type: inline-size;
		box-sizing: border-box;
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: center;

		&:nth-child(1) {
			grid-column: left-half;
		}

		&:nth-child(2) {
			grid-column: right-half;
		}
	}

	&.split-view--without-column-gap {
		.split-view__half {
			&:nth-child(1) {
				grid-column-end: center;
			}

			&:nth-child(2) {
				grid-column-start: center;
			}
		}
	}

	&.split-view--bleed--bleed {
		grid-column: bleed;

		.split-view__half {
			&:nth-child(1) {
				grid-column-start: bleed-start;
			}

			&:nth-child(2) {
				grid-column-end: bleed-end;
			}
		}
	}

	&.split-view--bleed-left--screen {
		.split-view__half {
			&:nth-child(1) {
				grid-column-start: screen-start;
			}
		}
	}

	&.split-view--bleed-right--screen {
		.split-view__half {
			&:nth-child(2) {
				grid-column-end: screen-end;
			}
		}
	}

	&.split-view--bleed-left--bleed {
		.split-view__half {
			&:nth-child(1) {
				grid-column-start: bleed-start;
			}
		}
	}

	&.split-view--bleed-right--bleed {
		.split-view__half {
			&:nth-child(2) {
				grid-column-end: bleed-end;
			}
		}
	}

	@container (max-width: 640px) {
		display: grid;
		grid-template-columns: subgrid;
		row-gap: var(--row-gap);

		.split-view__half:nth-child(1),
		.split-view__half:nth-child(2) {
			grid-column: content !important;
		}

		&.split-view--bleed-right--bleed {
			.split-view__half:nth-child(2) {
				grid-column: bleed !important;
			}
		}

		&.split-view--bleed-left--bleed {
			.split-view__half:nth-child(1) {
				grid-column: bleed !important;
			}
		}

		&.split-view--bleed-right--screen {
			.split-view__half:nth-child(2) {
				grid-column: screen !important;
			}
		}

		&.split-view--bleed-left--screen {
			.split-view__half:nth-child(1) {
				grid-column: screen !important;
			}
		}
	}

	&.split-view--without-row-gap {
		row-gap: 0;
	}
}