.triangles {
	display: block;
	height: calc(var(--size) * var(--rows));
	position: absolute;
	left: 0;
	right: 0;
	z-index: -1;
	margin-top: -3em;
	width: 100%;
	overflow: hidden;
}
.triangles+.spacer{
	height: calc(var(--size) * var(--rows));
}

[class*="triang"] div {
	--scale: 1;
	height: calc(var(--size) * var(--scale));
	width: calc(var(--size) * var(--scale));
	--x: 0;
	--y: 0;
	background-color: hsl(var(--hue), var(--sat), var(--lit));
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	position: absolute;
	left: calc(var(--x) * var(--size));
	top: calc(var(--y) * var(--size));
	opacity: 0;
	transition: opacity ease 1s;
}

[class*="triang"] div.dead {
	opacity: 0 !important;
}

.triangsqr {
	--rows: 7;
	--position: 0;
	aspect-ratio: 1/1;
	width: calc(var(--size) * var(--rows));
	overflow: hidden;
	position: absolute;
	z-index: -1;
	/* left: min 0, max 100% - (rows*size) */
	left: calc(var(--position) * (100% - var(--rows) * var(--size)));

}

.tr_special{
	position: absolute;
	z-index: -1;
	display: block;
	margin-top: calc(var(--size) * -5);
	width: 80vw;
	aspect-ratio: 371.125/225.78;
	left: calc(50% - 50vw);
}

.tr_single{
	--scale: 1;
	height: calc(var(--size) * var(--scale));
	width: calc(var(--size) * var(--scale));
	background-color: hsl(var(--hue), var(--sat), var(--lit));
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	position: absolute;
	left: 0;
	z-index: -1
}

.tr_left_dark {
	--scale: 5;
	--lit: 10%;
	--sat: 20%;
}
.tr_left_green {
	--scale: 7;
}
.tr_right_dark {
	--scale: 7;
	--lit: 10%;
	--sat: 20%;
	left: auto;
	right: 0;
	scale: -1 1;
}
.tr_right_green {
	--scale: 7;
	left: auto;
	right: 0;
	scale: -1 1;
}
.tr_right_gray {
	width: 50vw;
	height: 50vw;
	left: auto;
	right: 0;
	scale: -1;
	background: #f5f5f5;
}


@media screen and (max-width:768px){
	.triangles{
		margin-top: 0;
	}

	.triangsqr,
	.tr_single {
		display: none;
	}
}