.intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 2em 1em;

	display: grid;
	grid-template-columns: minmax(280px, 520px) minmax(260px, 500px);
	grid-template-areas:
		'why image'
		'philosophy image';
	column-gap: clamp(2rem, 5vw, 6rem);
	/* row-gap: clamp(2rem, 4vw, 4rem); */
	justify-content: center;
	align-items: start;

	.why-we-exist {
		grid-area: why;
		align-self: end;
		max-width: 520px;
		margin-bottom: 5em;
	}

	.intro-image-wrap {
		grid-area: image;
		align-self: center;
		justify-self: center;
		width: min(100%, 500px);
		padding: 10px;
		border-radius: 16px;

		.intro-image {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 12px;
		}
	}

	.our-philosophy {
		grid-area: philosophy;
		align-self: start;
		max-width: 520px;
		color: var(--color-white);
	}

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			to bottom,
			var(--color-gray-light) 0%,
			var(--color-gray-light) 50%,
			var(--color-primary) 50%,
			var(--color-primary) 100%
		);
	}

	@media (max-width: 900px) {
		grid-template-columns: 1fr;
		grid-template-areas:
			'why'
			'image'
			'philosophy';

		align-items: center;
		justify-content: center;
		justify-items: center;

		&::before {
			background: linear-gradient(
				to bottom,
				var(--color-gray-light) 0%,
				var(--color-gray-light) 38%,
				var(--color-primary) 38%,
				var(--color-primary) 100%
			);
		}
	}
}