/* CSS Document */


body
{
	display: grid;
	margin: 0;
}


/* - Clear base attributes - */ 

h1, h2, h3, h4, h5, p, a
{
	margin: 0;
}

/* - */

section
{
	display: grid;
}

@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
{
	display: grid;
}

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

.element
{
	display: grid;
	grid-gap: 8px;
	width: 80%;
	margin-left: 10%;
}

@media( min-width: 768px )
{
	.element
	{
		width: 100%;
		margin: 0;
	}
}

/* - */

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
{
	display: grid;
	grid-template-columns: auto;
	grid-gap: 16px;
}

@media( min-width: 768px )
{
	.col-2, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
	{
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media( min-width: 992px )
{
	.col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
	{
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media( min-width: 1200px )
{
	.col-4
	{
		display: grid;
		grid-template-columns: repeat( 4, 1fr );
	}
	
	.col-5
	{
		display: grid;
		grid-template-columns: repeat( 5, 1fr );
	}
	
	.col-6
	{
		display: grid;
		grid-template-columns: repeat( 6, 1fr );
	}
	
	.col-7
	{
		display: grid;
		grid-template-columns: repeat( 7, 1fr );
	}
	
	.col-8
	{
		display: grid;
		grid-template-columns: repeat( 8, 1fr );
	}
	
	.col-9
	{
		display: grid;
		grid-template-columns: repeat( 9, 1fr );
	}
	
	.col-10
	{
		display: grid;
		grid-template-columns: repeat( 10, 1fr );
	}
	
	.col-11
	{
		display: grid;
		grid-template-columns: repeat( 11, 1fr );
	}
	
	.col-12
	{
		display: grid;
		grid-template-columns: repeat( 12, 1fr );
	}
}


/* - Margin - */

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

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

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

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

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

/* - */

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

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

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

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

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

/* - padding - */

.pb-8
{
	padding-bottom: 8px;	
}

.pb-16
{
	padding-bottom: 16px;
}

.pb-32
{
	padding-bottom: 32px;
}

.pb-64
{
	padding-bottom: 64px;
}

.pb-128
{
	padding-bottom: 128px;
}

/* - */

.pt-8
{
	padding-top: 8px;
}

.pt-16
{
	padding-top: 16px;
}

.pt-32
{
	padding-top: 32px;
}

.pt-64
{
	padding-top: 64px;
}

.pt-128
{
	padding-top: 128px;
}

/* - Gaps */

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

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

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

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

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

/* - */

.align-start
{
	align-content: start;
}


/* - */

.center-content
{
	justify-content: center;
	align-content: center;
}