[data-span].grid > * > *
	{
		display: grid;
	}



/***   100%   ***/



[data-span].grid:is( [data-span~="span-1"] ) > * > *
	{
		grid-template-columns: repeat( 1, 1fr );
	}



/***   50%   ***/



[data-span].grid:is( [data-span~="span-2"] ) > * > *
	{
		grid-template-columns: repeat( 2, 1fr );
	}



/***   33.333%   ***/



[data-span].grid:is( [data-span~="span-3"] ) > * > *
	{
		grid-template-columns: repeat( 3, 1fr );
	}



/***   25%   ***/



[data-span].grid:is([data-span~="span-4"]) > * > *
	{
		grid-template-columns: repeat( 4, 1fr );
	} 



/***   20%   ***/



[data-span].grid:is([data-span~="span-5"]) > * > *
	{
		grid-template-columns: repeat( 5, 1fr );
	}



/***   16.667%   ***/



[data-span].grid:is( [data-span~="span-6"] ) > * > *
	{
		grid-template-columns: repeat( 6, 1fr );
	}	



/***   14.285%   ***/



[data-span].grid:is( [data-span~="span-7"] ) > * > *
	{
		grid-template-columns: repeat( 7, 1fr );
	}



/***   12.5%   ***/



[data-span].grid:is( [data-span~="span-8"] ) > * > *
	{
		grid-template-columns: repeat( 8, 1fr );
	}



/***   33.333% - 66.666%   ***/



[data-span].grid:is( [data-span~="span-1-2"] ) > * > *
	{
		grid-template-columns: 1fr 2fr;
	}



/***    66.666% - 33.333%   ***/



[data-span].grid:is( [data-span~="span-1-2"] ) > * > *
	{
		grid-template-columns: 2fr 1fr;
	}



/***    25% - 75%   ***/



[data-span].grid:is( [data-span~="span-1-3"] ) > * > *
	{
		grid-template-columns: 1fr 3fr;
	}



/***    75% - 25%   ***/



[data-span].grid:is( [data-span~="span-3-1"] ) > * > *
	{
		grid-template-columns: 3fr 1fr;
	}



/***    40% - 60%   ***/



[data-span].grid:is( [data-span~="span-2-3"] ) > * > *
	{
		grid-template-columns: 2fr 3fr;
	}



/***    60% - 40%   ***/



[data-span].grid:is( [data-span~="span-3-2"] ) > * > *
	{
		grid-template-columns: 3fr 2fr;
	}



/***    20% - 80%   ***/



[data-span].grid:is( [data-span~="span-1-4"] ) > * > *
	{
		grid-template-columns: 1fr 4fr;
	}




/***    80% - 20%   ***/



[data-span].grid:is( [data-span~="span-4-1"] ) > * > *
	{
		grid-template-columns: 4fr 1fr;
	}



/***    40% - 60%   ***/



[data-span].grid:is( [data-span~="span-2-5"] ) > * > *
	{
		grid-template-columns: 2fr 5fr;
	}



/***    60% - 40%   ***/



[data-span].grid:is( [data-span~="span-5-2"] ) > * > *
	{
		grid-template-columns: 1fr 2fr;
	}