/**
 * @author Valentin Alisch <hallo@valentinalisch.de>
 * @version 0.1
 *
 * Grid.css
 */



/**
 * ————————————————————
 * Always
 *
 * @since 0.1
 */
body,
html {
	width: 100%;
	min-height: 100vh;
}

@supports ( -webkit-touch-callout: none ) {
	body,
	html {
		min-height: -webkit-fill-available;
	}
}

/**
 * —————
 * Wrap 
 */
grid-wrap {
	display: block;
	overflow: hidden;
}

/**
 * —————
 * Row 
 */
grid-row {
	display: flex;
	flex-wrap: wrap;

	margin-left: calc( var( --grid-horizontal_spacing ) * -0.5 );
	margin-right: calc( var( --grid-horizontal_spacing ) * -0.5 );
	padding-left: calc( ( 100vw - var( --grid-content_width ) ) / 2 );
	padding-right: calc( ( 100vw - var( --grid-content_width ) ) / 2 );
}

grid-row[data-type*="no-wrap"] {
	flex-wrap: nowrap;
}

grid-row[data-type*="fill "],
grid-row[data-type$="fill"] {
	min-height: 100vh;
	padding-left: 0;
	padding-right: 0;
}

grid-row[data-type*="fill--vertical"] {
	min-height: 100vh;
}

@supports ( -webkit-touch-callout: none ) {
	grid-row[data-type*="fill "],
	grid-row[data-type$="fill"],
	grid-row[data-type*="fill--vertical"] {
		min-height: -webkit-fill-available;
	}
}

grid-row[data-type*="fill--horizontal"] {
	padding-left: 0;
	padding-right: 0;
}

grid-row[data-type*="collapse "],
grid-row[data-type$="collapse"],
grid-row[data-type*="collapse--horizontal"] {
	margin-left: 0;
	margin-right: 0;
}

grid-row[data-type*="collapse--vertical"] {}

grid-row,
grid-row[data-align="left"],
grid-row[data-align="top-left"] {
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
}

grid-row[data-align="top-center"] {
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
}

grid-row[data-align="top-justify"] {
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
}

grid-row[data-align="right"],
grid-row[data-align="top-right"] {
	justify-content: flex-end;
	align-content: flex-start;
	align-items: flex-start;
}

grid-row[data-align="center-left"] {
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}

grid-row[data-align="center"],
grid-row[data-align="center-center"] {
	justify-content: center;
	align-content: center;
	align-items: center;
}

grid-row[data-align="center-justify"] {
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

grid-row[data-align="center-right"] {
	justify-content: flex-end;
	align-content: center;
	align-items: center;
}

grid-row[data-align="stretch"],
grid-row[data-align="stretch-left"] {
	justify-content: flex-start;
	align-content: stretch;
	align-items: stretch;
}

grid-row[data-align="stretch-center"] {
	justify-content: center;
	align-content: stretch;
	align-items: stretch;
}

grid-row[data-align="stretch-justify"] {
	justify-content: space-between;
	align-content: stretch;
	align-items: stretch;
}

grid-row[data-align="stretch-right"] {
	justify-content: flex-end;
	align-content: stretch;
	align-items: stretch;
}

grid-row[data-align="bottom"],
grid-row[data-align="bottom-left"] {
	justify-content: flex-start;
	align-content: flex-end;
	align-items: flex-end;
}

grid-row[data-align="bottom-center"] {
	justify-content: center;
	align-content: flex-end;
	align-items: flex-end;
}

grid-row[data-align="bottom-justify"] {
	justify-content: space-between;
	align-content: flex-end;
	align-items: flex-end;
}

grid-row[data-align="bottom-right"] {
	justify-content: flex-end;
	align-content: flex-end;
	align-items: flex-end;
}

grid-row[data-align="justify-left"] {
	justify-content: flex-start;
	align-content: space-between;
	align-items: flex-end;
}

grid-row[data-align="justify-center"] {
	justify-content: center;
	align-content: space-between;
	align-items: flex-end;
}

grid-row[data-align="justify"],
grid-row[data-align="justify-justify"] {
	justify-content: space-between;
	align-content: space-between;
	align-items: flex-end;
}

grid-row[data-align="justify-right"] {
	justify-content: flex-end;
	align-content: space-between;
	align-items: flex-end;
}

grid-row[data-cols="1"] {	--grid-column_count: 1;		}
grid-row[data-cols="2"] {	--grid-column_count: 2;		}
grid-row[data-cols="3"] {	--grid-column_count: 3;		}
grid-row[data-cols="4"] {	--grid-column_count: 4;		}
grid-row[data-cols="5"] {	--grid-column_count: 5;		}
grid-row[data-cols="6"] {	--grid-column_count: 6;		}
grid-row[data-cols="7"] {	--grid-column_count: 7;		}
grid-row[data-cols="8"] {	--grid-column_count: 8;		}
grid-row[data-cols="9"] {	--grid-column_count: 9;		}
grid-row[data-cols="10"] {	--grid-column_count: 10;	}
grid-row[data-cols="11"] {	--grid-column_count: 11;	}
grid-row[data-cols="12"] {	--grid-column_count: 12;	}

/**
 * —————
 * Column
 */
grid-col {
	--column_offset: none;

	display: block;
	width: calc( 100% / var( --grid-column_count ) * var( --column_span ) );
	min-width: calc( 100% / var( --grid-column_count ) * var( --column_span ) );
	margin-left: calc( 100% / var( --grid-column_count ) * var( --column_offset ) );

	padding-left: calc( var( --grid-horizontal_spacing ) * 0.5 );
	padding-right: calc( var( --grid-horizontal_spacing ) * 0.5 );
}
	grid-col::after {
		content: '';
		height: var( --grid-vertical_spacing );
		width: 100%;
		display: block;
	}

	grid-row[data-type*="collapse "] > grid-col,
	grid-row[data-type$="collapse"] > grid-col,
	grid-row[data-type*="collapse--horizontal"] > grid-col {
		padding-left: 0;
		padding-right: 0;
	}

	grid-row[data-type*="collapse "] > grid-col::after,
	grid-row[data-type$="collapse"] > grid-col::after,
	grid-row[data-type*="collapse--vertical"] > grid-col::after {
		content: none;
		display: none;
	}



/**
 * ————————————————————
 * Small: and above
 *
 * @since 0.1
 */
body {
	--grid-column_count: var( --column_count, 12 );
	--grid-vertical_spacing: var( --vertical_spacing, 10px );
	--grid-horizontal_spacing: var( --horizontal_spacing, 10px );
	--grid-content_width: var( --content_width, none );
}

/**
 * —————
 * Column: Span 
 */
grid-col[data-span*="sm:"] { 		
	flex: 0; 
}

grid-col[data-span*="sm:auto "],
grid-col[data-span$="sm:auto"] { 
	width: auto; 
	--column_span: none;	
}

grid-col[data-span*="sm:fill "],
grid-col[data-span$="sm:fill"] { 
	width: auto; 
	--column_span: 0; 
	flex: 1; 
}

grid-col[data-span*="sm:1 "],
grid-col[data-span$="sm:1"] { 	
	--column_span: 1; 	
}

grid-col[data-span*="sm:2 "],
grid-col[data-span$="sm:2"] { 	
	--column_span: 2; 	
}

grid-col[data-span*="sm:3 "],
grid-col[data-span$="sm:3"] { 	
	--column_span: 3; 	
}

grid-col[data-span*="sm:4 "],
grid-col[data-span$="sm:4"] { 	
	--column_span: 4; 	
}

grid-col[data-span*="sm:5 "],
grid-col[data-span$="sm:5"] { 	
	--column_span: 5; 	
}

grid-col[data-span*="sm:6 "],
grid-col[data-span$="sm:6"] { 	
	--column_span: 6; 	
}

grid-col[data-span*="sm:7 "],
grid-col[data-span$="sm:7"] { 	
	--column_span: 7; 	
}

grid-col[data-span*="sm:8 "],
grid-col[data-span$="sm:8"] { 	
	--column_span: 8; 	
}

grid-col[data-span*="sm:9 "],
grid-col[data-span$="sm:9"] { 	
	--column_span: 9; 	
}

grid-col[data-span*="sm:10 "],
grid-col[data-span$="sm:10"] { 	
	--column_span: 10; 	
}

grid-col[data-span*="sm:11 "],
grid-col[data-span$="sm:11"] { 	
	--column_span: 11; 	
}

grid-col[data-span*="sm:12 "],
grid-col[data-span$="sm:12"] { 	
	--column_span: 12; 	
}

/**
 * ———————
 * Column: Offset 
 */
grid-col[data-offset*="sm:1 "],
grid-col[data-offset$="sm:1"] { 	
	--column_offset: 1; 
}

grid-col[data-offset*="sm:2 "],
grid-col[data-offset$="sm:2"] { 	
	--column_offset: 2; 	
}

grid-col[data-offset*="sm:3 "],
grid-col[data-offset$="sm:3"] { 	
	--column_offset: 3; 	
}

grid-col[data-offset*="sm:4 "],
grid-col[data-offset$="sm:4"] { 	
	--column_offset: 4; 	
}

grid-col[data-offset*="sm:5 "],
grid-col[data-offset$="sm:5"] { 	
	--column_offset: 5; 	
}

grid-col[data-offset*="sm:6 "],
grid-col[data-offset$="sm:6"] { 	
	--column_offset: 6; 	
}

grid-col[data-offset*="sm:7 "],
grid-col[data-offset$="sm:7"] { 	
	--column_offset: 7; 	
}

grid-col[data-offset*="sm:8 "],
grid-col[data-offset$="sm:8"] { 	
	--column_offset: 8; 	
}

grid-col[data-offset*="sm:9 "],
grid-col[data-offset$="sm:9"] { 	
	--column_offset: 9; 	
}

grid-col[data-offset*="sm:10 "],
grid-col[data-offset$="sm:10"] { 	
	--column_offset: 10; 	
}

grid-col[data-offset*="sm:11 "],
grid-col[data-offset$="sm:11"] { 	
	--column_offset: 11; 	
}

grid-col[data-offset*="sm:12 "],
grid-col[data-offset$="sm:12"] { 	
	--column_offset: 12; 	
}

/**
 * —————
 * Column: Order
 */
grid-col[data-order*="sm:1 "],
grid-col[data-order$="sm:1"] { 	
	order: 1; 
}

grid-col[data-order*="sm:2 "],
grid-col[data-order$="sm:2"] { 	
	order: 2; 	
}

grid-col[data-order*="sm:3 "],
grid-col[data-order$="sm:3"] { 	
	order: 3; 	
}

grid-col[data-order*="sm:4 "],
grid-col[data-order$="sm:4"] { 	
	order: 4; 	
}

grid-col[data-order*="sm:5 "],
grid-col[data-order$="sm:5"] { 	
	order: 5; 	
}

grid-col[data-order*="sm:6 "],
grid-col[data-order$="sm:6"] { 	
	order: 6; 	
}

grid-col[data-order*="sm:7 "],
grid-col[data-order$="sm:7"] { 	
	order: 7; 	
}

grid-col[data-order*="sm:8 "],
grid-col[data-order$="sm:8"] { 	
	order: 8; 	
}

grid-col[data-order*="sm:9 "],
grid-col[data-order$="sm:9"] { 	
	order: 9; 	
}

grid-col[data-order*="sm:10 "],
grid-col[data-order$="sm:10"] { 	
	order: 10; 	
}

grid-col[data-order*="sm:11 "],
grid-col[data-order$="sm:11"] { 	
	order: 11; 	
}

grid-col[data-order*="sm:12 "],
grid-col[data-order$="sm:12"] { 	
	order: 12; 	
}

/**
 * —————
 * Column: Align
 */
grid-col[data-align*="sm:top "],
grid-col[data-align$="sm:top"] {
	align-self: flex-start;
}

grid-col[data-align*="sm:center "],
grid-col[data-align$="sm:center"] {
	align-self: center;
}

grid-col[data-align*="sm:bottom "],
grid-col[data-align$="sm:bottom"] {
	align-self: flex-end;
}

/**
 * ——————————
 * Small: only
 *
 * @since 0.1
 */
@media ( max-width: 699px ) {

	/**
	 * —————
	 * Column: Span 
	 */
	grid-col[data-span*="sm:1--only"] { 	--column_span: 1; 	}
	grid-col[data-span*="sm:2--only"] { 	--column_span: 2; 	}
	grid-col[data-span*="sm:3--only"] { 	--column_span: 3; 	}
	grid-col[data-span*="sm:4--only"] { 	--column_span: 4; 	}
	grid-col[data-span*="sm:5--only"] { 	--column_span: 5; 	}
	grid-col[data-span*="sm:6--only"] { 	--column_span: 6; 	}
	grid-col[data-span*="sm:7--only"] { 	--column_span: 7; 	}
	grid-col[data-span*="sm:8--only"] { 	--column_span: 8; 	}
	grid-col[data-span*="sm:9--only"] { 	--column_span: 9; 	}
	grid-col[data-span*="sm:10--only"] { 	--column_span: 10; 	}
	grid-col[data-span*="sm:11--only"] { 	--column_span: 11; 	}
	grid-col[data-span*="sm:12--only"] { 	--column_span: 12; 	}

	/**
	 * —————
	 * Column: Offset 
	 */
	grid-col[data-offset*="sm:1--only"] { 	--column_offset: 1; 	}
	grid-col[data-offset*="sm:2--only"] { 	--column_offset: 2; 	}
	grid-col[data-offset*="sm:3--only"] { 	--column_offset: 3; 	}
	grid-col[data-offset*="sm:4--only"] { 	--column_offset: 4; 	}
	grid-col[data-offset*="sm:5--only"] { 	--column_offset: 5; 	}
	grid-col[data-offset*="sm:6--only"] { 	--column_offset: 6; 	}
	grid-col[data-offset*="sm:7--only"] { 	--column_offset: 7; 	}
	grid-col[data-offset*="sm:8--only"] { 	--column_offset: 8; 	}
	grid-col[data-offset*="sm:9--only"] { 	--column_offset: 9; 	}
	grid-col[data-offset*="sm:10--only"] { 	--column_offset: 10; 	}
	grid-col[data-offset*="sm:11--only"] { 	--column_offset: 11; 	}
	grid-col[data-offset*="sm:12--only"] { 	--column_offset: 12; 	}

	/**
	 * —————
	 * Column: Order 
	 */
	grid-col[data-order*="sm:1--only"] { 	order: 1; 	}
	grid-col[data-order*="sm:2--only"] { 	order: 2; 	}
	grid-col[data-order*="sm:3--only"] { 	order: 3; 	}
	grid-col[data-order*="sm:4--only"] { 	order: 4; 	}
	grid-col[data-order*="sm:5--only"] { 	order: 5; 	}
	grid-col[data-order*="sm:6--only"] { 	order: 6; 	}
	grid-col[data-order*="sm:7--only"] { 	order: 7; 	}
	grid-col[data-order*="sm:8--only"] { 	order: 8; 	}
	grid-col[data-order*="sm:9--only"] { 	order: 9; 	}
	grid-col[data-order*="sm:10--only"] { 	order: 10; 	}
	grid-col[data-order*="sm:11--only"] { 	order: 11; 	}
	grid-col[data-order*="sm:12--only"] { 	order: 12; 	}

	/**
	 * —————
	 * Column: Align
	 */
	grid-col[data-align*="sm:top--only"] { 		align-self: flex-start; 	}
	grid-col[data-align*="sm:center--only"] { 	align-self: center; 		}
	grid-col[data-align*="sm:bottom--only"] { 	align-self: flex-bottom; 	}

}



/**
 * ————————————————————
 * Medium: and above
 *
 * @since 0.1
 */
@media ( min-width: 700px ) {

	body {
		--grid-column_count: var( --column_count, 12 );
		--grid-vertical_spacing: var( --vertical_spacing, 15px );
		--grid-horizontal_spacing: var( --horizontal_spacing, 15px );
		--grid-content_width: var( --content_width, none );
	}

	/**
	 * —————
	 * Column: Span 
	 */
	grid-col[data-span*="md:"] { 		
		flex: 0; 
	}

	grid-col[data-span*="md:auto "],
	grid-col[data-span$="md:auto"] { 
		width: auto; 
		--column_span: none;	
	}

	grid-col[data-span*="md:fill "],
	grid-col[data-span$="md:fill"] { 
		width: auto; 
		--column_span: 0; 
		flex: 1; 
	}

	grid-col[data-span*="md:1 "],
	grid-col[data-span$="md:1"] { 	
		--column_span: 1; 	
	}

	grid-col[data-span*="md:2 "],
	grid-col[data-span$="md:2"] { 	
		--column_span: 2; 	
	}

	grid-col[data-span*="md:3 "],
	grid-col[data-span$="md:3"] { 	
		--column_span: 3; 	
	}

	grid-col[data-span*="md:4 "],
	grid-col[data-span$="md:4"] { 	
		--column_span: 4; 	
	}

	grid-col[data-span*="md:5 "],
	grid-col[data-span$="md:5"] { 	
		--column_span: 5; 	
	}

	grid-col[data-span*="md:6 "],
	grid-col[data-span$="md:6"] { 	
		--column_span: 6; 	
	}

	grid-col[data-span*="md:7 "],
	grid-col[data-span$="md:7"] { 	
		--column_span: 7; 	
	}

	grid-col[data-span*="md:8 "],
	grid-col[data-span$="md:8"] { 	
		--column_span: 8; 	
	}

	grid-col[data-span*="md:9 "],
	grid-col[data-span$="md:9"] { 	
		--column_span: 9; 	
	}

	grid-col[data-span*="md:10 "],
	grid-col[data-span$="md:10"] { 	
		--column_span: 10; 	
	}

	grid-col[data-span*="md:11 "],
	grid-col[data-span$="md:11"] { 	
		--column_span: 11; 	
	}

	grid-col[data-span*="md:12 "],
	grid-col[data-span$="md:12"] { 	
		--column_span: 12; 	
	}

	/**
	 * —————
	 * Column: Offset 
	 */
	grid-col[data-offset*="md:1 "],
	grid-col[data-offset$="md:1"] { 	
		--column_offset: 1; 
	}

	grid-col[data-offset*="md:2 "],
	grid-col[data-offset$="md:2"] { 	
		--column_offset: 2; 	
	}

	grid-col[data-offset*="md:3 "],
	grid-col[data-offset$="md:3"] { 	
		--column_offset: 3; 	
	}

	grid-col[data-offset*="md:4 "],
	grid-col[data-offset$="md:4"] { 	
		--column_offset: 4; 	
	}

	grid-col[data-offset*="md:5 "],
	grid-col[data-offset$="md:5"] { 	
		--column_offset: 5; 	
	}

	grid-col[data-offset*="md:6 "],
	grid-col[data-offset$="md:6"] { 	
		--column_offset: 6; 	
	}

	grid-col[data-offset*="md:7 "],
	grid-col[data-offset$="md:7"] { 	
		--column_offset: 7; 	
	}

	grid-col[data-offset*="md:8 "],
	grid-col[data-offset$="md:8"] { 	
		--column_offset: 8; 	
	}

	grid-col[data-offset*="md:9 "],
	grid-col[data-offset$="md:9"] { 	
		--column_offset: 9; 	
	}

	grid-col[data-offset*="md:10 "],
	grid-col[data-offset$="md:10"] { 	
		--column_offset: 10; 	
	}

	grid-col[data-offset*="md:11 "],
	grid-col[data-offset$="md:11"] { 	
		--column_offset: 11; 	
	}

	grid-col[data-offset*="md:12 "],
	grid-col[data-offset$="md:12"] { 	
		--column_offset: 12; 	
	}

	/**
	 * —————
	 * Column: Order
	 */
	grid-col[data-order*="md:1 "],
	grid-col[data-order$="md:1"] { 	
		order: 1; 
	}

	grid-col[data-order*="md:2 "],
	grid-col[data-order$="md:2"] { 	
		order: 2; 	
	}

	grid-col[data-order*="md:3 "],
	grid-col[data-order$="md:3"] { 	
		order: 3; 	
	}

	grid-col[data-order*="md:4 "],
	grid-col[data-order$="md:4"] { 	
		order: 4; 	
	}

	grid-col[data-order*="md:5 "],
	grid-col[data-order$="md:5"] { 	
		order: 5; 	
	}

	grid-col[data-order*="md:6 "],
	grid-col[data-order$="md:6"] { 	
		order: 6; 	
	}

	grid-col[data-order*="md:7 "],
	grid-col[data-order$="md:7"] { 	
		order: 7; 	
	}

	grid-col[data-order*="md:8 "],
	grid-col[data-order$="md:8"] { 	
		order: 8; 	
	}

	grid-col[data-order*="md:9 "],
	grid-col[data-order$="md:9"] { 	
		order: 9; 	
	}

	grid-col[data-order*="md:10 "],
	grid-col[data-order$="md:10"] { 	
		order: 10; 	
	}

	grid-col[data-order*="md:11 "],
	grid-col[data-order$="md:11"] { 	
		order: 11; 	
	}

	grid-col[data-order*="md:12 "],
	grid-col[data-order$="md:12"] { 	
		order: 12; 	
	}

	/**
	 * —————
	 * Column: Align
	 */
	grid-col[data-align*="md:top "],
	grid-col[data-align$="md:top"] {
		align-self: flex-start;
	}

	grid-col[data-align*="md:center "],
	grid-col[data-align$="md:center"] {
		align-self: center;
	}

	grid-col[data-align*="md:bottom "],
	grid-col[data-align$="md:bottom"] {
		align-self: flex-end;
	}

}

/**
 * ——————————
 * Medium: only
 *
 * @since 0.1
 */
@media ( min-width: 700px ) and ( max-width: 1099px ) {

	/**
	 * —————
	 * Column: Span 
	 */
	grid-col[data-span*="md:1--only"] { 	--column_span: 1; 	}
	grid-col[data-span*="md:2--only"] { 	--column_span: 2; 	}
	grid-col[data-span*="md:3--only"] { 	--column_span: 3; 	}
	grid-col[data-span*="md:4--only"] { 	--column_span: 4; 	}
	grid-col[data-span*="md:5--only"] { 	--column_span: 5; 	}
	grid-col[data-span*="md:6--only"] { 	--column_span: 6; 	}
	grid-col[data-span*="md:7--only"] { 	--column_span: 7; 	}
	grid-col[data-span*="md:8--only"] { 	--column_span: 8; 	}
	grid-col[data-span*="md:9--only"] { 	--column_span: 9; 	}
	grid-col[data-span*="md:10--only"] { 	--column_span: 10; 	}
	grid-col[data-span*="md:11--only"] { 	--column_span: 11; 	}
	grid-col[data-span*="md:12--only"] { 	--column_span: 12; 	}

	/**
	 * —————
	 * Column: Offset 
	 */
	grid-col[data-offset*="md:1--only"] { 	--column_offset: 1; 	}
	grid-col[data-offset*="md:2--only"] { 	--column_offset: 2; 	}
	grid-col[data-offset*="md:3--only"] { 	--column_offset: 3; 	}
	grid-col[data-offset*="md:4--only"] { 	--column_offset: 4; 	}
	grid-col[data-offset*="md:5--only"] { 	--column_offset: 5; 	}
	grid-col[data-offset*="md:6--only"] { 	--column_offset: 6; 	}
	grid-col[data-offset*="md:7--only"] { 	--column_offset: 7; 	}
	grid-col[data-offset*="md:8--only"] { 	--column_offset: 8; 	}
	grid-col[data-offset*="md:9--only"] { 	--column_offset: 9; 	}
	grid-col[data-offset*="md:10--only"] { 	--column_offset: 10; 	}
	grid-col[data-offset*="md:11--only"] { 	--column_offset: 11; 	}
	grid-col[data-offset*="md:12--only"] { 	--column_offset: 12; 	}

	/**
	 * —————
	 * Column: Order 
	 */
	grid-col[data-order*="md:1--only"] { 	order: 1; 	}
	grid-col[data-order*="md:2--only"] { 	order: 2; 	}
	grid-col[data-order*="md:3--only"] { 	order: 3; 	}
	grid-col[data-order*="md:4--only"] { 	order: 4; 	}
	grid-col[data-order*="md:5--only"] { 	order: 5; 	}
	grid-col[data-order*="md:6--only"] { 	order: 6; 	}
	grid-col[data-order*="md:7--only"] { 	order: 7; 	}
	grid-col[data-order*="md:8--only"] { 	order: 8; 	}
	grid-col[data-order*="md:9--only"] { 	order: 9; 	}
	grid-col[data-order*="md:10--only"] { 	order: 10; 	}
	grid-col[data-order*="md:11--only"] { 	order: 11; 	}
	grid-col[data-order*="md:12--only"] { 	order: 12; 	}

	/**
	 * —————
	 * Column: Align
	 */
	grid-col[data-align*="md:top--only"] { 		align-self: flex-start; 	}
	grid-col[data-align*="md:center--only"] { 	align-self: center; 		}
	grid-col[data-align*="md:bottom--only"] { 	align-self: flex-bottom; 	}

}

/**
 * ——————————
 * Medium: and below
 *
 * @since 0.1
 */
@media ( max-width: 1099px ) {

	/**
	 * —————
	 * Column: Span 
	 */
	grid-col[data-span*="md:1--down"] { 	--column_span: 1; 	}
	grid-col[data-span*="md:2--down"] { 	--column_span: 2; 	}
	grid-col[data-span*="md:3--down"] { 	--column_span: 3; 	}
	grid-col[data-span*="md:4--down"] { 	--column_span: 4; 	}
	grid-col[data-span*="md:5--down"] { 	--column_span: 5; 	}
	grid-col[data-span*="md:6--down"] { 	--column_span: 6; 	}
	grid-col[data-span*="md:7--down"] { 	--column_span: 7; 	}
	grid-col[data-span*="md:8--down"] { 	--column_span: 8; 	}
	grid-col[data-span*="md:9--down"] { 	--column_span: 9; 	}
	grid-col[data-span*="md:10--down"] { 	--column_span: 10; 	}
	grid-col[data-span*="md:11--down"] { 	--column_span: 11; 	}
	grid-col[data-span*="md:12--down"] { 	--column_span: 12; 	}

	/**
	 * —————
	 * Column: Offset 
	 */
	grid-col[data-offset*="md:1--down"] { 	--column_offset: 1; 	}
	grid-col[data-offset*="md:2--down"] { 	--column_offset: 2; 	}
	grid-col[data-offset*="md:3--down"] { 	--column_offset: 3; 	}
	grid-col[data-offset*="md:4--down"] { 	--column_offset: 4; 	}
	grid-col[data-offset*="md:5--down"] { 	--column_offset: 5; 	}
	grid-col[data-offset*="md:6--down"] { 	--column_offset: 6; 	}
	grid-col[data-offset*="md:7--down"] { 	--column_offset: 7; 	}
	grid-col[data-offset*="md:8--down"] { 	--column_offset: 8; 	}
	grid-col[data-offset*="md:9--down"] { 	--column_offset: 9; 	}
	grid-col[data-offset*="md:10--down"] { 	--column_offset: 10; 	}
	grid-col[data-offset*="md:11--down"] { 	--column_offset: 11; 	}
	grid-col[data-offset*="md:12--down"] { 	--column_offset: 12; 	}

	/**
	 * —————
	 * Column: Order 
	 */
	grid-col[data-order*="md:1--down"] { 	order: 1; 	}
	grid-col[data-order*="md:2--down"] { 	order: 2; 	}
	grid-col[data-order*="md:3--down"] { 	order: 3; 	}
	grid-col[data-order*="md:4--down"] { 	order: 4; 	}
	grid-col[data-order*="md:5--down"] { 	order: 5; 	}
	grid-col[data-order*="md:6--down"] { 	order: 6; 	}
	grid-col[data-order*="md:7--down"] { 	order: 7; 	}
	grid-col[data-order*="md:8--down"] { 	order: 8; 	}
	grid-col[data-order*="md:9--down"] { 	order: 9; 	}
	grid-col[data-order*="md:10--down"] { 	order: 10; 	}
	grid-col[data-order*="md:11--down"] { 	order: 11; 	}
	grid-col[data-order*="md:12--down"] { 	order: 12; 	}

	/**
	 * —————
	 * Column: Align
	 */
	grid-col[data-align*="md:top--down"] { 		align-self: flex-start; 	}
	grid-col[data-align*="md:center--down"] { 	align-self: center; 		}
	grid-col[data-align*="md:bottom--down"] { 	align-self: flex-bottom; 	}

}



/**
 * ————————————————————
 * Large: and above
 *
 * @since 0.1
 */
@media ( min-width: 1100px ) {

	body {
		--grid-column_count: var( --column_count, 12 );
		--grid-vertical_spacing: var( --vertical_spacing, 20px );
		--grid-horizontal_spacing: var( --horizontal_spacing, 20px );
		--grid-content_width: var( --content_width, none );
	}

	/**
	 * —————
	 * Column: Span 
	 */
	grid-col[data-span*="lg:"] { 		
		flex: 0; 
	}

	grid-col[data-span*="lg:auto "],
	grid-col[data-span$="lg:auto"] { 
		width: auto; 
		--column_span: none;	
	}

	grid-col[data-span*="lg:fill "],
	grid-col[data-span$="lg:fill"] { 
		width: auto; 
		--column_span: 0; 
		flex: 1; 
	}

	grid-col[data-span*="lg:1 "],
	grid-col[data-span$="lg:1"] { 	
		--column_span: 1; 	
	}

	grid-col[data-span*="lg:2 "],
	grid-col[data-span$="lg:2"] { 	
		--column_span: 2; 	
	}

	grid-col[data-span*="lg:3 "],
	grid-col[data-span$="lg:3"] { 	
		--column_span: 3; 	
	}

	grid-col[data-span*="lg:4 "],
	grid-col[data-span$="lg:4"] { 	
		--column_span: 4; 	
	}

	grid-col[data-span*="lg:5 "],
	grid-col[data-span$="lg:5"] { 	
		--column_span: 5; 	
	}

	grid-col[data-span*="lg:6 "],
	grid-col[data-span$="lg:6"] { 	
		--column_span: 6; 	
	}

	grid-col[data-span*="lg:7 "],
	grid-col[data-span$="lg:7"] { 	
		--column_span: 7; 	
	}

	grid-col[data-span*="lg:8 "],
	grid-col[data-span$="lg:8"] { 	
		--column_span: 8; 	
	}

	grid-col[data-span*="lg:9 "],
	grid-col[data-span$="lg:9"] { 	
		--column_span: 9; 	
	}

	grid-col[data-span*="lg:10 "],
	grid-col[data-span$="lg:10"] { 	
		--column_span: 10; 	
	}

	grid-col[data-span*="lg:11 "],
	grid-col[data-span$="lg:11"] { 	
		--column_span: 11; 	
	}

	grid-col[data-span*="lg:12 "],
	grid-col[data-span$="lg:12"] { 	
		--column_span: 12; 	
	}

	/**
	 * —————
	 * Column: Offset 
	 */
	grid-col[data-offset*="lg:1 "],
	grid-col[data-offset$="lg:1"] { 	
		--column_offset: 1; 
	}

	grid-col[data-offset*="lg:2 "],
	grid-col[data-offset$="lg:2"] { 	
		--column_offset: 2; 	
	}

	grid-col[data-offset*="lg:3 "],
	grid-col[data-offset$="lg:3"] { 	
		--column_offset: 3; 	
	}

	grid-col[data-offset*="lg:4 "],
	grid-col[data-offset$="lg:4"] { 	
		--column_offset: 4; 	
	}

	grid-col[data-offset*="lg:5 "],
	grid-col[data-offset$="lg:5"] { 	
		--column_offset: 5; 	
	}

	grid-col[data-offset*="lg:6 "],
	grid-col[data-offset$="lg:6"] { 	
		--column_offset: 6; 	
	}

	grid-col[data-offset*="lg:7 "],
	grid-col[data-offset$="lg:7"] { 	
		--column_offset: 7; 	
	}

	grid-col[data-offset*="lg:8 "],
	grid-col[data-offset$="lg:8"] { 	
		--column_offset: 8; 	
	}

	grid-col[data-offset*="lg:9 "],
	grid-col[data-offset$="lg:9"] { 	
		--column_offset: 9; 	
	}

	grid-col[data-offset*="lg:10 "],
	grid-col[data-offset$="lg:10"] { 	
		--column_offset: 10; 	
	}

	grid-col[data-offset*="lg:11 "],
	grid-col[data-offset$="lg:11"] { 	
		--column_offset: 11; 	
	}

	grid-col[data-offset*="lg:12 "],
	grid-col[data-offset$="lg:12"] { 	
		--column_offset: 12; 	
	}

	/**
	 * —————
	 * Column: Order
	 */
	grid-col[data-order*="lg:1 "],
	grid-col[data-order$="lg:1"] { 	
		order: 1; 
	}

	grid-col[data-order*="lg:2 "],
	grid-col[data-order$="lg:2"] { 	
		order: 2; 	
	}

	grid-col[data-order*="lg:3 "],
	grid-col[data-order$="lg:3"] { 	
		order: 3; 	
	}

	grid-col[data-order*="lg:4 "],
	grid-col[data-order$="lg:4"] { 	
		order: 4; 	
	}

	grid-col[data-order*="lg:5 "],
	grid-col[data-order$="lg:5"] { 	
		order: 5; 	
	}

	grid-col[data-order*="lg:6 "],
	grid-col[data-order$="lg:6"] { 	
		order: 6; 	
	}

	grid-col[data-order*="lg:7 "],
	grid-col[data-order$="lg:7"] { 	
		order: 7; 	
	}

	grid-col[data-order*="lg:8 "],
	grid-col[data-order$="lg:8"] { 	
		order: 8; 	
	}

	grid-col[data-order*="lg:9 "],
	grid-col[data-order$="lg:9"] { 	
		order: 9; 	
	}

	grid-col[data-order*="lg:10 "],
	grid-col[data-order$="lg:10"] { 	
		order: 10; 	
	}

	grid-col[data-order*="lg:11 "],
	grid-col[data-order$="lg:11"] { 	
		order: 11; 	
	}

	grid-col[data-order*="lg:12 "],
	grid-col[data-order$="lg:12"] { 	
		order: 12; 	
	}

	/**
	 * —————
	 * Column: Align
	 */
	grid-col[data-align*="lg:top "],
	grid-col[data-align$="lg:top"] {
		align-self: flex-start;
	}

	grid-col[data-align*="lg:center "],
	grid-col[data-align$="lg:center"] {
		align-self: center;
	}

	grid-col[data-align*="lg:bottom "],
	grid-col[data-align$="lg:bottom"] {
		align-self: flex-end;
	}

}

/**
 * ——————————
 * Large: and below
 *
 * @since 0.1
 */
@media ( max-width: 99999px ) {

	/**
	 * —————
	 * Column: Span 
	 */
	grid-col[data-span*="lg:1--down"] { 	--column_span: 1; 	}
	grid-col[data-span*="lg:2--down"] { 	--column_span: 2; 	}
	grid-col[data-span*="lg:3--down"] { 	--column_span: 3; 	}
	grid-col[data-span*="lg:4--down"] { 	--column_span: 4; 	}
	grid-col[data-span*="lg:5--down"] { 	--column_span: 5; 	}
	grid-col[data-span*="lg:6--down"] { 	--column_span: 6; 	}
	grid-col[data-span*="lg:7--down"] { 	--column_span: 7; 	}
	grid-col[data-span*="lg:8--down"] { 	--column_span: 8; 	}
	grid-col[data-span*="lg:9--down"] { 	--column_span: 9; 	}
	grid-col[data-span*="lg:10--down"] { 	--column_span: 10; 	}
	grid-col[data-span*="lg:11--down"] { 	--column_span: 11; 	}
	grid-col[data-span*="lg:12--down"] { 	--column_span: 12; 	}

	/**
	 * —————
	 * Column: Offset 
	 */
	grid-col[data-offset*="lg:1--down"] { 	--column_offset: 1; 	}
	grid-col[data-offset*="lg:2--down"] { 	--column_offset: 2; 	}
	grid-col[data-offset*="lg:3--down"] { 	--column_offset: 3; 	}
	grid-col[data-offset*="lg:4--down"] { 	--column_offset: 4; 	}
	grid-col[data-offset*="lg:5--down"] { 	--column_offset: 5; 	}
	grid-col[data-offset*="lg:6--down"] { 	--column_offset: 6; 	}
	grid-col[data-offset*="lg:7--down"] { 	--column_offset: 7; 	}
	grid-col[data-offset*="lg:8--down"] { 	--column_offset: 8; 	}
	grid-col[data-offset*="lg:9--down"] { 	--column_offset: 9; 	}
	grid-col[data-offset*="lg:10--down"] { 	--column_offset: 10; 	}
	grid-col[data-offset*="lg:11--down"] { 	--column_offset: 11; 	}
	grid-col[data-offset*="lg:12--down"] { 	--column_offset: 12; 	}

	/**
	 * —————
	 * Column: Order 
	 */
	grid-col[data-order*="lg:1--down"] { 	order: 1; 	}
	grid-col[data-order*="lg:2--down"] { 	order: 2; 	}
	grid-col[data-order*="lg:3--down"] { 	order: 3; 	}
	grid-col[data-order*="lg:4--down"] { 	order: 4; 	}
	grid-col[data-order*="lg:5--down"] { 	order: 5; 	}
	grid-col[data-order*="lg:6--down"] { 	order: 6; 	}
	grid-col[data-order*="lg:7--down"] { 	order: 7; 	}
	grid-col[data-order*="lg:8--down"] { 	order: 8; 	}
	grid-col[data-order*="lg:9--down"] { 	order: 9; 	}
	grid-col[data-order*="lg:10--down"] { 	order: 10; 	}
	grid-col[data-order*="lg:11--down"] { 	order: 11; 	}
	grid-col[data-order*="lg:12--down"] { 	order: 12; 	}

	/**
	 * —————
	 * Column: Align
	 */
	grid-col[data-align*="lg:top--down"] { 		align-self: flex-start; 	}
	grid-col[data-align*="lg:center--down"] { 	align-self: center; 		}
	grid-col[data-align*="lg:bottom--down"] { 	align-self: flex-bottom; 	}

}