/***
 *	Cols System
 *	2019-05-16
 */

:root {
	--cols-gap: var( --gap, 20px );
}

.cols, .cols > * { box-sizing: border-box }

.cols { display: flex; flex-wrap: wrap; width: 100%; }
	.cols.m-gutter { width: calc( 100% + var( --cols-gap, 20px ) ); margin-right: calc( var( --cols-gap, 20px ) * -1 ); }

	/* .cols > *:not( :empty ) { margin-bottom: 1.25rem; flex: 1 1 100% } */
	.cols > * {}
		.cols.m-gutter > * { margin-right: var( --cols-gap, 20px ); margin-bottom: var( --cols-gap, 20px ); }
		.cols.m-gutter > * > *:last-child { margin-bottom: 0; }

	ul.cols, ol.cols { padding: 0; list-style: none }
	ul.cols > li + li, ol.cols > li + li { margin-top: 0 }

	/*
	.cols-auto { justify-content: space-around }
		.cols-auto > * { width: 200px }
	*/

	.cols-1 > * { width: 100% }
		.cols-1.m-gutter > * { width: calc( 100% - var( --cols-gap, 20px ) ) }

	.cols-2 > * { width: 50% }
		.cols-2.m-gutter > * { width: calc( 50% - var( --cols-gap, 20px ) ) }

	.cols-3 > * { width: 33.33% }
		.cols-3.m-gutter > * { width: calc( 33.33% - var( --cols-gap, 20px ) ) }

	.cols-4 > * { width: 25% }
		.cols-4.m-gutter > * { width: calc( 25% - var( --cols-gap, 20px ) ) }

	.cols-5 > * { width: 20% }
		.cols-5.m-gutter > * { width: calc( 20% - var( --cols-gap, 20px ) ) }

	.cols-6 > * { width: 16.66% }
		.cols-6.m-gutter > * { width: calc( 16.66% - var( --cols-gap, 20px ) ) }


@media only screen and ( min-width: 360px ){
	.cols-1-mb > * { width: 100% }
		.cols-1-mb.m-gutter > * { width: calc( 100% - var( --cols-gap, 20px ) ) }

	.cols-2-mb > * { width: 50% }
		.cols-2-mb.m-gutter > * { width: calc( 50% - var( --cols-gap, 20px ) ) }

	.cols-3-mb > * { width: 33.33% }
		.cols-3-mb.m-gutter > * { width: calc( 33.33% - var( --cols-gap, 20px ) ) }

	.cols-4-mb > * { width: 25% }
		.cols-4-mb.m-gutter > * { width: calc( 25% - var( --cols-gap, 20px ) ) }

	.cols-5-mb > * { width: 20% }
		.cols-5-mb.m-gutter > * { width: calc( 20% - var( --cols-gap, 20px ) ) }

	.cols-6-mb > * { width: 16.66% }
		.cols-6-mb.m-gutter > * { width: calc( 16.66% - var( --cols-gap, 20px ) ) }
}

@media only screen and ( min-width: 600px ){
	.cols-1-tb > * { width: 100% }
		.cols-1-tb.m-gutter > * { width: calc( 100% - var( --cols-gap, 20px ) ) }

	.cols-2-tb > * { width: 50% }
		.cols-2-tb.m-gutter > * { width: calc( 50% - var( --cols-gap, 20px ) ) }

	.cols-3-tb > * { width: 33.33% }
		.cols-3-tb.m-gutter > * { width: calc( 33.33% - var( --cols-gap, 20px ) ) }

	.cols-4-tb > * { width: 25% }
		.cols-4-tb.m-gutter > * { width: calc( 25% - var( --cols-gap, 20px ) ) }

	.cols-5-tb > * { width: 20% }
		.cols-5-tb.m-gutter > * { width: calc( 20% - var( --cols-gap, 20px ) ) }

	.cols-6-tb > * { width: 16.66% }
		.cols-6-tb.m-gutter > * { width: calc( 16.66% - var( --cols-gap, 20px ) ) }
}

@media only screen and ( min-width: 900px ){
	.cols-1-dt > * { width: 100% }
		.cols-1-dt.m-gutter > * { width: calc( 100% - var( --cols-gap, 20px ) ) }

	.cols-2-dt > * { width: 50% }
		.cols-2-dt.m-gutter > * { width: calc( 50% - var( --cols-gap, 20px ) ) }

	.cols-3-dt > * { width: 33.33% }
		.cols-3-dt.m-gutter > * { width: calc( 33.33% - var( --cols-gap, 20px ) ) }

	.cols-4-dt > * { width: 25% }
		.cols-4-dt.m-gutter > * { width: calc( 25% - var( --cols-gap, 20px ) ) }

	.cols-5-dt > * { width: 20% }
		.cols-5-dt.m-gutter > * { width: calc( 20% - var( --cols-gap, 20px ) ) }

	.cols-6-dt > * { width: 16.66% }
		.cols-6-dt.m-gutter > * { width: calc( 16.66% - var( --cols-gap, 20px ) ) }
}

@media only screen and ( min-width: 1440px ){
	.cols-1-xx > * { width: 100% }
		.cols-1-xx.m-gutter > * { width: calc( 100% - var( --cols-gap, 20px ) ) }

	.cols-2-xx > * { width: 50% }
		.cols-2-xx.m-gutter > * { width: calc( 50% - var( --cols-gap, 20px ) ) }

	.cols-3-xx > * { width: 33.33% }
		.cols-3-xx.m-gutter > * { width: calc( 33.33% - var( --cols-gap, 20px ) ) }

	.cols-4-xx > * { width: 25% }
		.cols-4-xx.m-gutter > * { width: calc( 25% - var( --cols-gap, 20px ) ) }

	.cols-5-xx > * { width: 20% }
		.cols-5-xx.m-gutter > * { width: calc( 20% - var( --cols-gap, 20px ) ) }

	.cols-6-xx > * { width: 16.66% }
		.cols-6-xx.m-gutter > * { width: calc( 16.66% - var( --cols-gap, 20px ) ) }
}