[data-span] > * > *
	{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}



/***   100%   ***/



[data-span]:is( [data-span="span-1"] ) > * > * > *
	{
		width: 100%;
		max-width: 100%;
	}



/***   50%   ***/



[data-span]:is( [data-span="span-2"] ) > * > * > *
	{
		width: 50%;
		max-width: 50%;
	}



/***   33.333%   ***/



[data-span]:is( [data-span="span-3"] ) > * > * > *
	{
		width: 33.333%;
		max-width: 33.333%;
	}



/***   25%   ***/



[data-span]:is([data-span="span-4"]) > * > * > *
	{
		width: 25%;
		max-width: 25%;
	} 



/***   20%   ***/



[data-span]:is([data-span="span-5"]) > * > * > *
	{
		width: 20%;
		max-width: 20%;
	}



/***   16.667%   ***/



[data-span]:is( [data-span="span-6"] ) > * > * > *
	{
		width: 16.667%;
		max-width: 16.667%;
	}	



/***   14.285%   ***/



[data-span]:is( [data-span="span-7"] ) > * > * > *
	{
		width: 14.285%;
		max-width: 14.285%;
	}



/***   12.5%   ***/



[data-span]:is( [data-span="span-8"] ) > * > * > *
	{
		width: 12.5%;
		max-width: 12.5%;
	}



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



[data-span]:is( [data-span="span-1-2"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 33.333%;
		max-width: 33.333%;
	}

[data-span]:is( [data-span="span-1-2"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 66.666%;
		max-width: 66.666%;
	}



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



[data-span]:is([data-span="span-2-1"]) > * > * > *:is( :nth-child( odd ) )
	{
		width: 66.666%;
		max-width: 66.666%;
	}

[data-span]:is( [data-span="span-2-1"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 33.333%;
		max-width: 33.333%;
	}



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



[data-span]:is([data-span="span-1-3"]) > * > * > *:is( :nth-child( odd ) )
	{
		width: 25%;
		max-width: 25%;
	}


/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-1-3"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/
[data-span]:is( [data-span="span-1-3"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 75%;
		max-width: 75%;
	}
/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-1-3"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/



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



[data-span]:is( [data-span="span-3-1"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 75%;
		max-width: 75%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-3-1"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/

[data-span]:is([data-span="span-3-1"]) > * > * > *:is( :nth-child( even ) )
	{
		width: 25%;
		max-width: 25%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-3-1"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/



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



[data-span]:is([data-span="span-1-4"]) > * > * > *:is( :nth-child( odd ) )
	{
		width: 20%;
		max-width: 20%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-1-4"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/

[data-span]:is([data-span="span-1-4"]) > * > * > *:is( :nth-child( even ) )
	{
		width: 80%;
		max-width: 80%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-1-4"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/



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



[data-span]:is( [data-span="span-4-1"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 80%;
		max-width: 80%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-4-1"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/

[data-span]:is([data-span="span-4-1"]) > * > * > *:is( :nth-child( even ) )
	{
		width: 20%;
		max-width: 20%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-4-1"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/



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



[data-span]:is([data-span="span-2-5"]) > * > * > *:is( :nth-child( odd ) )
	{
		width: 40%;
		max-width: 40%;
	}
/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-2-5"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/

[data-span]:is( [data-span="span-2-5"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 60%;
		max-width: 60%;
	}
/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-2-5"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/



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



[data-span]:is([data-span="span-5-2"]) > * > * > *:is( :nth-child( odd ) )
	{
		width: 60%;
		max-width: 60%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-5-2"] ) > * > * > *:is( :nth-child( odd ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/

[data-span]:is([data-span="span-5-2"]) > * > * > *:is( :nth-child( even ) )
	{
		width: 40%;
		max-width: 40%;
	}

/*
.layout-section:is( [max-width~="540px"] ) > * > * > * > [data-span]:is( [data-span="span-5-2"] ) > * > * > *:is( :nth-child( even ) )
	{
		width: 100%;
		max-width: 100%;
	}
*/