[cs-span]:not([cs-span=""])::attribute( data-span )
	{
		$: attribute/width-sensor;
	}



/***   SPAN-2   ***/



[cs-span="span-2"]::attribute( data-span )
	{
		select: span-1( 0, 540 ), span-2( 540 );
	}



/***   SPAN-1-2   ***/



[cs-span="span-1-2"]::attribute( data-span )
	{
		select: span-1( 0, 540 ), span-2( 540, 850 ), span-1-2( 850 );
	}



/***   SPAN-2-1   ***/



[cs-span="span-2-1"]::attribute( data-span )
	{
		select: span-1( 0, 540 ), span-2( 540, 850 ), span-2-1( 850 );
	}



/***   SPAN-3   ***/



[cs-span="span-3"]::attribute( data-span )
	{
		select: span-1( 0, 540 ), span-2( 540, 768 ), span-3( 768 );
	}



/***   SPAN-4   ***/



[cs-span="span-4"]::attribute( data-span )
	{
		select: span-1( 0, 400 ), span-2( 400, 700 ), span-3( 700, 900 ), span-4( 900 );
	}



/***   SPAN-4-1   ***/



[cs-span="span-4-1"]::attribute( data-span )
	{
		select: span-1( 0, 768 ), span-4-1( 768 );
	}



/***   SPAN-1-4   ***/



[cs-span="span-1-4"]::attribute( data-span )
	{
		select: span-1( 0, 768 ), span-1-4( 768 );
	}



/***   SPAN-5   ***/



[cs-span="span-5"]::attribute( data-span )
	{
		select: span-1( 0, 400 ), span-2( 400, 700 ), span-3( 700, 900 ), span-4( 900, 1100 ), span-5( 1100 );
	}



/***   SPAN-5-2   ***/



[cs-span="span-5-2"]::attribute( data-span )
	{
		select: span-1( 0, 540 ), span-5-2( 540 );
	}