/* Alchemy | ver 4 */

body {
	display: grid;
	margin: 0;
}

/* - */

h1,
h2,
h3,
h4,
h5,
p {
	margin: 0;
	justify-self: start;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Section */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

section {
	display: grid;
	width: 100%;
}

@media (min-width: 768px) {
	section {
		grid-template-columns: auto 768px auto;
	}
}

@media (min-width: 992px) {
	section {
		grid-template-columns: auto 992px auto;
	}
}

@media (min-width: 1200px) {
	section {
		grid-template-columns: auto 1200px auto;
	}
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Workspace */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.workspace {
	display: grid;
	justify-self: center;
	width: 90%;

	z-index: 3;
}

@media (min-width: 768px) {
	.workspace {
		grid-column: 2;
		grid-row: 1;
		width: 95%;
	}
}

@media (min-width: 1200px) {
	.workspace {
		width: 100%;
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.edge-container {
	display: grid;
}

.workspace-a .edge-container {
	display: grid;
	overflow-x: hidden;
	justify-content: end;
}

.workspace-b .edge-container {
	display: grid;
	overflow-x: hidden;
	justify-content: start;
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.element {
	display: grid;
	grid-gap: 16px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Col */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.col-2,
.col-3,
.col-4,
.col-5,
.col-6 {
	display: grid;
}

@media (min-width: 768px) {
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.col-3,
	.col-4,
	.col-5,
	.col-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1200px) {
	.col-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.col-5 {
		grid-template-columns: repeat(5, 1fr);
	}

	.col-6 {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Gap */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.gap-0 {
	grid-gap: 0;
}

.gap-8 {
	grid-gap: 8px;
}

.gap-16 {
	grid-gap: 16px;
}

.gap-24 {
	grid-gap: 24px;
}

.gap-32 {
	grid-gap: 32px;
}

.gap-64 {
	grid-gap: 64px;
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* Images */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.img {
	max-width: 100%;
	justify-self: center;
	border-radius: 25px;
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* margin */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - */

.m-8 {
	margin: 8px;
}

.m-16 {
	margin: 16px;
}

.m-32 {
	margin: 32px;
}

.m-64 {
	margin: 64px;
}

/* - margin-top */

.mt-8 {
	margin-top: 8px;
}

.mt-16 {
	margin-top: 16px;
}

.mt-32 {
	margin-top: 32px;
}

.mt-64 {
	margin-top: 64px;
}

/* - margin-bottom */

.mb-8 {
	margin-bottom: 8px;
}

.mb-16 {
	margin-bottom: 16px;
}

.mb-32 {
	margin-bottom: 32px;
}

.mb-64 {
	margin-bottom: 64px;
}

/* - - - - */

/* - margin vertical ( top + bottom ) - */

/* - - - - */

.mv-8 {
	margin-top: 8px;
	margin-bottom: 8px;
}

.mv-16 {
	margin-top: 16px;
	margin-bottom: 16px;
}

.mv-32 {
	margin-top: 32px;
	margin-bottom: 32px;
}

.mv-64 {
	margin-top: 64px;
	margin-bottom: 64px;
}

/* - - - - */

/* - margin-left */

/* - - - - */

.ml-8 {
	margin-left: 8px;
}

.ml-16 {
	margin-left: 16px;
}

.ml-32 {
	margin-left: 32px;
}

.ml-64 {
	margin-left: 64px;
}

/* - margin-right */

.mr-8 {
	margin-right: 8px;
}

.mr-16 {
	margin-right: 16px;
}

.mr-32 {
	margin-right: 32px;
}

.mr-64 {
	margin-right: 64px;
}

/* - - - - */

/* - margin horizontal ( Left + Right ) - */

/* - - - - */

.mh-8 {
	margin-left: 8px;
	margin-right: 8px;
}

.mh-16 {
	margin-left: 16px;
	margin-right: 16px;
}

.mh-32 {
	margin-left: 32px;
	margin-right: 32px;
}

.mh-64 {
	margin-left: 32px;
	margin-right: 32px;
}

/* - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* - misc - */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.simple {
	align-self: center;
	justify-self: start;
}

.point {
	align-self: center;
	justify-self: center;
}

/* - */

.col-2a,
.col-2b {
	display: grid;
}

@media (min-width: 768px) {
	.col-2a {
		grid-template-columns: 33% auto;
	}

	.col-2b {
		grid-template-columns: auto 33%;
	}
}

/* - */

.hide {
	display: none !important;
}

.a1 {
	align-self: start;
	justify-self: start;
}

.a2 {
	align-self: start;
	justify-self: center;
}

.a3 {
	align-self: start;
	justify-self: end;
}

.a4 {
	align-self: center;
	justify-self: start;
}

.a5 {
	align-self: center;
	justify-self: center;
}

.a6 {
	align-self: center;
	justify-self: end;
}

.a7 {
	align-self: end;
	justify-self: start;
}

.a8 {
	align-self: end;
	justify-self: center;
}

.a9 {
	align-self: end;
	justify-self: end;
}