/* Alchemy CSS - v1 */

body
{
	display:grid;
	margin:0;	
}

/* - wrap - */

.grid 
{
	display: grid;
}

section
{
	display: grid;
	grid-template-columns: auto;
}

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

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

/* Block */

.workspace
{
	display: grid;
	grid-template-columns: auto;
	/* padding: 0 32px 32px; */
}

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

/* - */

.txt
{
	display: grid;
	justify-self: center;
	align-self: center;
	padding: 32px;
}


.left
{
	justify-self: start;
}


/* - */

.txt-middle
{
	display: grid;
	justify-self: center;
	align-self: center;
	padding: 32px;
}




@media ( min-width:768px )
{
	.txt-middle
	{
		padding: 64px;
	}
}



/* - */


.col-2, .col-3, .col-4, .col-5, .col-6
{
	grid-template-columns: auto;
}

@media ( min-width: 768px )
{
	.col-2, .col-3, .col-4, .col-5, .col-6
	{
		padding: 32px;
		grid-gap: 16px;
		margin-bottom: 32px;
		grid-template-columns: repeat( 2, auto );
	}
}

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

@media ( min-width: 1200px )
{

	.col-2, .col-3, .col-4, .col-5, .col-6
	{
		padding: 0 32px;
	}
	
	.col-4
	{
		grid-template-columns: repeat( 4, auto );
	}
	
	.col-5
	{
		grid-template-columns: repeat( 5, auto );
	}
	
	.col-6
	{
		grid-template-columns: repeat( 6, auto );
	}
	
}


/* - */



.feature-img
{
	width: 90%;
    align-self: center;
	justify-self: center;
	margin: 16px 0;
}

@media ( min-width: 768px )
{
	.feature-img
	{
		width: 100%;
		align-self: center;
		margin: 32px 0;
	}
}

.pad-btm-16
{
	padding-bottom: 16px!important;
}

.pad-btm-32
{
	padding-bottom: 32px!important;
}

.pad-top-16
{
	padding-top: 16px!important;
}

.pad-top-32
{
	padding-top: 32px!important;
}