/* 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;
}

/* - */



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

/* 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;
}

.a6
{
    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;
}