:root {
	/* font-size: 16px;
	--color-text: #fff;
	--color-bg: #000;
	--color-link: #fff;
	--color-link-hover: #907030;
	--color-title: #907030; */
	--perspective: 1500px;
	--grid-item-ratio: 1.5;
	--grid-width: 100%;
	--grid-height: auto;
	--grid-gap: 2vw;
	--grid-columns: 4;
	--grid-inner-scale: 1;
}

.grid3d.content {
	position: relative;
	margin-bottom: 20vh;
}

/* .grid3d.content--spacing {
	margin-bottom: 100vh;
} */

.grid3d .content__title {
	position: absolute;
	height: 100vh;
	width: 100vw;
	top: 50%;
	left: 50%;
	margin: -50vh 0 0 -50vw;
	padding: 0 10vw;
	display: grid;
	place-items: center;
	text-align: center;
	font-weight: 300;
	font-size: clamp(1.5rem, 15vw, 6.5rem);
}

.grid3d .content__title--top {
	align-items: start;
}

.grid3d .content__title--bottom {
	align-items: end;
}

.grid3d .content__title--left {
	justify-items: start;
	text-align: left;
}

.grid3d .content__title--right {
	justify-items: end;
	text-align: right;
	word-break: break-word;
}



.grid3d .grid {
	display: grid;
	place-items: center;
	padding: 2rem;
	width: 100%;
	perspective: var(--perspective);
}

.grid3d .grid-wrap {
	height: var(--grid-height);
	width: var(--grid-width);
	display: grid;
	grid-template-columns: repeat(var(--grid-columns),1fr);
	gap: var(--grid-gap);
	transform-style: preserve-3d;
}

.grid3d .grid__item {
	aspect-ratio: var(--grid-item-ratio);
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	border-radius: 8px;
	display: grid;
	place-items: center;
}

.grid3d .grid__item-inner {
	position: relative;
	width: calc(1 / var(--grid-inner-scale) * 100%);
	height: calc(1 / var(--grid-inner-scale) * 100%);
	background-size: cover;
	background-position: 50% 50%;
}