.two_part {
	display: grid;
	grid-template:
		"main"
		"secondary";
	gap: 0px;
	min-height: 80vh;
}

.left,
.right {
	height: 100%;
	box-sizing: border-box;
	padding: 0;
}

.left {
	grid-area: main;
}

.right {
	grid-area: secondary;
	background: var(--bg-color, var(--color-eggshell));
}

@media screen and (min-width: 720px) {
	.two_part_container {
		display: flex;
		width: 100%;
		margin-top: -10px;
		--brush-border-width: 40px;
	}

	.two_part {
		display: grid;
		width: 100%;
		grid-template:
			"main secondary" auto / 2fr 1fr;
		gap: 0px;
	}

	.left {
		grid-area: main;
		margin-right: calc(var(--brush-border-width) + 8px);
	}

	.right {
		position: relative;
		grid-area: secondary;
	}

	.right::after {
		--border-mask: url("../../images/components/border-brush/two-part-right-border-desktop-36i1bvW.svg");
		content: '';
		position: absolute;
		background-color: var(--bg-color, var(--color-eggshell));
		left: calc(-1 * var(--brush-border-width));
		top: 0;
		bottom: 0;
		mask-repeat: repeat;
		width: var(--brush-border-width);
		height: 100%;
		-webkit-mask-image: var(--border-mask);
		mask-image: var(--border-mask);
	}
}