body {
	font-family: system-ui, sans-serif;
	/*font-size: 100%;
	line-height: 1.4em;*/
}

.main-grid {
	display: grid;
	gap: 1em;
}
header.main-grid {
	row-gap: 0;
}

.col-1 {
	grid-column: 1/-1;	
}

	h1,h2 {
		grid-column: 1/-1;
 }



@media (min-width: 600px) {
	
.main-grid {
		grid-template-columns: repeat(12, minmax(0,1fr) );
		grid-template-rows: repeat(3, minmax(0,1fr) );

	}
	main.main-grid {
        grid-template-areas: 'help help help help help help wild wild wild wild wild wild'
		                     'zila zila zila zila oooo oooo oooo oooo cool cool cool cool'
							/*'4col1 4col1 4col1 4col2 4col2 4col2 4col3 4col3 4col3 4col4 4col4 4col4'*/;	
 }	
	/*
	.sub1 {
        grid-template-areas: 'help help help help help help wild wild wild wild wild wild'
		                    ;	
 }
 
 	.sub2 {
        grid-template-areas: 
		                     'zila zila zila zila oooo oooo oooo oooo cool cool cool cool'
							'4col1 4col1 4col1 4col2 4col2 4col2 4col3 4col3 4col3 4col4 4col4 4col4';							
 }
 */
.col-2-start {
	/*	grid-column: 1/7;	*/
		grid-area: wild;		
 }

.col-2-end	{
/*		grid-column: 7/-1;	*/
		grid-area: help;	
 }

.col-3-start	{
/*		grid-column: 1/5;	*/
		grid-area: zila;	
 }


.col-3-mid	{
/*		grid-column: 5/9;	*/
		grid-area: oooo;
 }


.col-3-end	{
/*		grid-column: 9/-1;	*/
		grid-area: cool;
 }


	h1,h2 {
		grid-column: 1/-1;
 }

}






							


/*	.col-4-start	{	
	grid-column: / ;
}							*/