.hero {
	display: grid;
	position: relative;
}

.arrow-holder {
	display: none;
	position: absolute;
	z-index: 20;
}

.welcome {
	font-weight: bold;
	font-size: 0.875rem;
	text-transform: uppercase;
}

.hero-text {
	display: grid;
	gap: 2rem;
	order: 2;
	padding-top: var(--s-sm);
}

.hero-text,
.hero-text > * {
	height: fit-content;
}

.hero-text > *:last-child {
	align-self: end;
}

.button-lockup {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.hero-childgrid {
	display: grid;
	border: 1px solid var(--black);
	grid-auto-rows: none;
	order: 1;
}

.childgrid-circle,
.childgrid-triangle {
	display: none;
	border: 1px solid var(--black);
	height: 100%;
}

.childgrid-triangle > svg {
	display: none;
}

.childgrid-circle > svg {
	height: 100%;
	width: calc(100% + 1px);
}

.childgrid-image {
	aspect-ratio: 1;
	padding: 1rem;
}

.childgrid-image img {
	background: var(--stone);
}

@media screen and (min-width: 30rem) {
	.childgrid-image {
		aspect-ratio: 2;
	}
}

@media screen and (min-width: 68rem) {
	.hero {
		grid-template-columns: 1fr 1fr;
		max-width: var(--w-2xl);
	}

	.hero-text {
		order: 1;
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: var(--s-sm);
		padding-top: 0;
	}

	.lockup-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: end;
	}

	.hero-childgrid {
		order: 2;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}

	.childgrid-image {
		aspect-ratio: unset;
		grid-column: span 2;
		grid-row: span 2;
		padding: 1.5rem;
	}

	.childgrid-circle,
	.childgrid-triangle {
		display: block;
	}

	.childgrid-triangle {
		border: none;
		border-right: 1px solid var(--black);
		border-top: 1px solid var(--black);
	}
	.childgrid-circle {
		border: none;
		border-top: 1px solid var(--black);
		position: relative;
	}
}

@media screen and (min-width: 82rem) {
	.arrow-holder {
		display: block;
		width: 3rem;
		aspect-ratio: 1;
		right: 59%;
		bottom: 15%;
	}

	.arrow-holder > svg {
		transform: rotate(90deg);
	}

	.hero-text {
		max-width: 43rem;
		padding: var(--s-md);
	}

	.hero-childgrid {
		order: 2;
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}

	.childgrid-image {
		order: 2;
		grid-column: span 6;
		grid-row: span 5;
	}

	.childgrid-circle,
	.childgrid-triangle {
		border: none;
	}

	.childgrid-triangle {
		border: none;
		order: 3;
		grid-column: span 6;
		grid-row: span 1;
		border-top: 1px solid var(--black);
		display: flex;
		width: 100%;
		justify-content: end;
	}

	.childgrid-triangle > svg {
		width: 7rem;
		display: block;
	}
	.childgrid-circle {
		order: 1;
		grid-column: span 2;
		grid-row: span 6;
		display: grid;
		place-items: center;
		border-right: 1px solid var(--black);
		position: relative;
	}

	.childgrid-circle > svg {
		width: calc(100% + 1px);
		height: auto;
		position: relative;
		top: 9.25rem;
	}
}