.wrapper {
	box-sizing: border-box;
	width: 100%;
	max-width: 1768px;
	margin: 0 auto;
	padding: 0 1.5em;
	/* overflow: hidden; */
}

@media (max-width: 600px) {
	.wrapper {
		padding: 0 4vw;
	}
}
@media (min-width: 1921px) {
	.wrapper {
		max-width: 1848px;
		padding: 0 4em;
	}
}

.wrapper .unwrapper {
	margin-left: -1.5em;
	margin-right: -1.5em;
	/* width: 100vw; */
	box-sizing: border-box;
}
.wrapper .unwrapper-l {
	margin-left: -1.5em;
	/* width: 100vw; */
	box-sizing: border-box;
}
.wrapper .unwrapper-r {
	margin-right: -1.5em;
	/* width: 100vw; */
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.wrapper .unwrapper {
		margin-left: -4vw;
		margin-right: -4vw;
	}
	.wrapper .unwrapper-l {
		margin-left: -4vw;
	}
	.wrapper .unwrapper-r {
		margin-right: -4vw;
	}
}
@media (min-width: 1921px) {
	.wrapper .unwrapper {
		margin-left: -4em;
		margin-right: -4em;
	}
	.wrapper .unwrapper-l {
		margin-left: -4em;
	}
	.wrapper .unwrapper-r {
		margin-right: -4em;
	}
}

.custom-margin {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto;
	padding: 0 calc(1.5em - 1.5rem);
}

@media (min-width: 600px) {
	.custom-margin {
		padding: 0 calc(4vw - 1.5rem);
	}
}

@media (min-width: 1921px) {
	.custom-margin {
		padding: 0 calc(4em - 1.5rem);
	}
}

:root {
	--accent-color: #574ae2;
	--white-color: #ffffff;
	--white-grey-color: #f6f6f6;
	--black-color: #000000;
	--grey-color: #515151;
	--light-grey-color: #c7c7c7;
	--green-color: #004f31;

	--index: calc(1vh + 1vw);
}

.white-color {
	color: var(--white-color);
}
.white-grey-color {
	color: var(--white-grey-color);
}
.black-color {
	background-color: var(--black-color);
}
.grey-color {
	color: var(--grey-color);
}
.light-grey-color {
	color: var(--light-grey-color);
}
.green-color {
	color: var(--green-color);
}