.accents {
	position: absolute; top: 0; left: 0; z-index: -2;
	height: 100%; width: 100%; overflow: hidden;
	
	pointer-events: none;
	
	--column-width:	  min(1200px, 100%);
	--column-padding: calc(max(0px, 100vw - var(--column-width)) / 2);
}
.accents > .accent {
	will-change: transform;
	position: absolute; top: var(--top);
	left: calc(var(--column-padding) + var(--column-width) * var(--left));
	right: calc(var(--column-padding) + var(--column-width) * var(--right));
	height: 0; width: 0; overflow: visible;
}
.accents > .accent:not([style*="--left"]) { left: unset; }
.accents > .accent:not([style*="--right"]) { right: unset; }
.accents > .accent > .graphic {
	position: absolute; transform: translate(-50%, -50%);
	
	background-color: #FFF;
	
	--mask-position: center;
	--mask-size: contain;
	--mask-repeat: no-repeat;

	-webkit-mask-image: var(--mask-image);
	mask-image: var(--mask-image);
	-webkit-mask-position: var(--mask-position);
	mask-position: var(--mask-position);
	-webkit-mask-size: var(--mask-size);
	mask-size: var(--mask-size);
	-webkit-mask-repeat: var(--mask-repeat);
	mask-repeat: var(--mask-repeat);
}
.accents > .accent > .graphic:before {
	content: '';
	display: block;
}

.accents > .accent > .graphic-1,
.accents > .accent > .graphic-2 {
	--mask-image: url(../../images/accent-0.svg);
	opacity: .1;
}
.accents > .accent > .graphic-1:before,
.accents > .accent > .graphic-2:before { padding-top: 19.34%; }
@media (min-width: 900px) {
	.accents > .accent > .graphic-1 { width: min(1600px, 80vw); }
	.accents > .accent > .graphic-2 { width: min(1400px, 70vw); }
}
@media (max-width: 899.99px) {
	.accents > .accent > .graphic-1,
	.accents > .accent > .graphic-2 { width: 100vw; }
}

.accents > .accent > .graphic-3 {
	width: min(550px, 50vw);
	--mask-image: url(../../images/accent-3.svg);
	
	opacity: .3;
}
.accents > .accent > .graphic-3:before { padding-top: 85%; }