/***
 *	Grid System
 *
 *	Reference:
 *			https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 *			https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
 *			https://github.com/1000ch/grd
 *			https://lucasgruwez.github.io/waffle-grid/
 *
 *	Data: 	2025-01-13
 *
 */

	:root {
		--gap: 20px;
		--grid-gap: var( --gap, 20px );
		--grid-division-color: var( --text-color, #333 );
	}

	.row { display: flex; flex-wrap: wrap; width: 100%; --gap-x: 0px; --gap-y: 0px; }
	* + .row { margin-top: var( --gap ); }

		.col { position: relative; flex: 0 1 auto; box-sizing: border-box; --grid-gap: 0px; margin-right: var(--grid-gap); }


	/* Gutter */
	.row.m-gap { /* --gap-x: 20px; */ --grid-gap: 20px; --gap-y: 20px; width: calc( 100% + var( --grid-gap ) ); gap: var(--gap-y) 0; }
		.row.m-gap > .col { --grid-gap: 20px; }
		/* .hide + .row.m-gutter { margin-top: calc( var( --gap ) * -1 ); } */
		.hide + .row.m-gap { margin-top: 0 !important; }
		/* .row.m-gutter > .col { margin-right: var( --gap ); margin-top: var( --gap ); } */

		.row.m-no-gap { width: 100%; margin-right: 0; margin-top: 0; }
			.row.m-no-gap > .col { margin-right: 0; margin-top: 0; }

		.row.m-gap.m-xc { padding-right: var(--grid-gap); }


	/* Separated */
	.row.m-separated {}
		.row.m-separated > .col { padding-left: var( --gap ); padding-right: var( --gap ); }
		.row.m-separated > .col + .col { border-left: 1px solid var( --grid-division-color ); }

		.row.m-no-separated {}
			.row.m-no-separated > .col { padding-left: 0; padding-right: 0; }
			.row.m-no-separated > .col + .col { border-left: 0; }


	/* Reverse */
	.row.m-reverse { flex-direction: row-reverse; }
		.row.m-reverse.m-gutter > .col {}

		.row.m-no-reverse { flex-direction: row; }
			.row.m-no-reverse.m-gutter > .col {}


	/* Column */
	.row.m-column { flex-direction: column; }
		.row.m-column > .col { width: 100%; }

		.row.m-no-column { flex-direction: row; }
			.row.m-no-column > .col {}

		.row.m-column.m-gutter {}
			.row.m-column.m-gutter > .col { width: calc( 100% - var( --grid-gap ) ); }


	/* Column Reverse */
	.row.m-column.m-reverse { flex-direction: column-reverse; }
		.row.m-column.m-reverse > .col {}

		.row.m-column.m-no-reverse { flex-direction: column; }
			.row.m-column.m-no-reverse > .col {}

		.row.m-no-column.m-reverse { flex-direction: row-reverse; }
			.row.m-no-column.m-reverse > .col {}

		.row.m-column.m-reverse.m-gutter {}
			.row.m-column.m-reverse.m-gutter > .col {}


	/* inside padding */
	.row.m-padded {}
		.row.m-padded > .col { padding: var( --gap ); }

		.row.m-no-padded {}
			.row.m-no-padded > .col { padding: 0; }


	/* fit-all column, desconsider column width and show all in the same row */
	.row.m-fit-all { flex-wrap: nowrap; }


/* -mb */
@media only screen and ( min-width: 360px ){
	/* Gutter */
	.row.m-gutter-mb { width: calc( 100% + var( --grid-gap ) ); margin-right: calc( var( --grid-gap ) * -1 ); /* margin-top: calc( var( --gap ) * -1 ); */ }
		.row.m-gutter-mb > .col { margin-right: var( --grid-gap ); /* margin-top: var( --gap ); */ }

		.row.m-no-gutter-mb { width: 100%; margin-right: 0; margin-top: 0; }
			.row.m-no-gutter-mb > .col { margin-right: 0; margin-top: 0; }


	/* Separated */
	.row.m-separated-mb {}
		.row.m-separated-mb > .col { padding-left: var( --gap ); padding-right: var( --gap ); }
		.row.m-separated-mb > .col + .col { border-left: 1px solid #333; }

		.row.m-no-separated-mb {}
			.row.m-no-separated-mb > .col { padding-left: 0; padding-right: 0; }
			.row.m-no-separated-mb > .col + .col { border-left: 0; }


	/* Reverse */
	.row.m-reverse-mb { flex-direction: row-reverse; }
		.row.m-reverse-mb.m-gutter > .col,
		.row.m-reverse.m-gutter-mb > .col {}

		.row.m-no-reverse-mb { flex-direction: row; }
			.row.m-no-reverse-mb.m-gutter > .col,
			.row.m-no-reverse.m-gutter-mb > .col {}


	/* Column */
	.row.m-column-mb { flex-direction: column; }
		.row.m-column-mb > .col { width: 100%; }

		.row.m-no-column-mb { flex-direction: row; }
			.row.m-no-column-mb > .col {}

		.row.m-column-mb.m-gutter,
		.row.m-column.m-gutter-mb {}
			.row.m-column-mb.m-gutter > .col,
			.row.m-column.m-gutter-mb > .col { width: calc( 100% - var( --grid-gap ) ); }


	/* Column Reverse */
	.row.m-column-mb.m-reverse,
	.row.m-column.m-reverse-mb { flex-direction: column-reverse; }
		.row.m-column-mb.m-reverse > .col,
		.row.m-column.m-reverse-mb > .col {}

		.row.m-column-mb.m-no-reverse,
		.row.m-column.m-no-reverse-mb { flex-direction: column; }
			.row.m-column-mb.m-no-reverse > .col,
			.row.m-column.m-no-reverse-mb > .col {}

		.row.m-no-column-mb.m-reverse,
		.row.m-no-column.m-reverse-mb { flex-direction: row-reverse; }
			.row.m-no-column-mb.m-reverse > .col,
			.row.m-no-column.m-reverse-mb > .col {}

		.row.m-column-mb.m-reverse.m-gutter,
		.row.m-column.m-reverse-mb.m-gutter,
		.row.m-column.m-reverse.m-gutter-mb {}
			.row.m-column-mb.m-reverse.m-gutter > .col,
			.row.m-column.m-reverse-mb.m-gutter > .col,
			.row.m-column.m-reverse.m-gutter-mb > .col {}


	/* inside padding */
	.row.m-padded-mb {}
		.row.m-padded-mb > .col { padding: var( --gap ); }

		.row.m-no-padded-mb {}
			.row.m-no-padded-mb > .col { padding: 0; }


	/* fit-all column, desconsider column width and show all in the same row */
	.row.m-fit-all-mb { display: flex; flex-wrap: nowrap; }
}

/* -tb */
@media only screen and ( min-width: 600px ){
	/* Gutter */
	.row.m-gutter-tb { width: calc( 100% + var( --grid-gap ) ); margin-right: calc( var( --grid-gap ) * -1 ); /* margin-top: calc( var( --gap ) * -1 ); */ }
		.row.m-gutter-tb > .col { margin-right: var( --grid-gap ); /* margin-top: var( --gap ); */ }

		.row.m-no-gutter-tb { width: 100%; margin-right: 0; margin-top: 0; }
			.row.m-no-gutter-tb > .col { margin-right: 0; margin-top: 0; }


	/* Separated */
	.row.m-separated-tb {}
		.row.m-separated-tb > .col { padding-left: var( --gap ); padding-right: var( --gap ); }
		.row.m-separated-tb > .col + .col { border-left: 1px solid #333; }

		.row.m-no-separated-tb {}
			.row.m-no-separated-tb > .col { padding-left: 0; padding-right: 0; }
			.row.m-no-separated-tb > .col + .col { border-left: 0; }


	/* Reverse */
	.row.m-reverse-tb { flex-direction: row-reverse; }
		.row.m-reverse-tb.m-gutter > .col,
		.row.m-reverse.m-gutter-tb > .col {}

		.row.m-no-reverse-tb { flex-direction: row; }
			.row.m-no-reverse-tb.m-gutter > .col,
			.row.m-no-reverse.m-gutter-tb > .col {}


	/* Column */
	.row.m-column-tb { flex-direction: column; }
		.row.m-column-tb > .col { width: 100%; }

		.row.m-no-column-tb { flex-direction: row; }
			.row.m-no-column-tb > .col {}

		.row.m-column-tb.m-gutter,
		.row.m-column.m-gutter-tb {}
			.row.m-column-tb.m-gutter > .col,
			.row.m-column.m-gutter-tb > .col { width: calc( 100% - var( --grid-gap ) ); }


	/* Column Reverse */
	.row.m-column-tb.m-reverse,
	.row.m-column.m-reverse-tb { flex-direction: column-reverse; }
		.row.m-column-tb.m-reverse > .col,
		.row.m-column.m-reverse-tb > .col {}

		.row.m-column-tb.m-no-reverse,
		.row.m-column.m-no-reverse-tb { flex-direction: column; }
			.row.m-column-tb.m-no-reverse > .col,
			.row.m-column.m-no-reverse-tb > .col {}

		.row.m-no-column-tb.m-reverse,
		.row.m-no-column.m-reverse-tb { flex-direction: row-reverse; }
			.row.m-no-column-tb.m-reverse > .col,
			.row.m-no-column.m-reverse-tb > .col {}

		.row.m-column-tb.m-reverse.m-gutter,
		.row.m-column.m-reverse-tb.m-gutter,
		.row.m-column.m-reverse.m-gutter-tb {}
			.row.m-column-tb.m-reverse.m-gutter > .col,
			.row.m-column.m-reverse-tb.m-gutter > .col,
			.row.m-column.m-reverse.m-gutter-tb > .col {}


	/* inside padding */
	.row.m-padded-tb {}
		.row.m-padded-tb > .col { padding: var( --gap ); }

		.row.m-no-padded-tb {}
			.row.m-no-padded-tb > .col { padding: 0; }


	/* fit-all column, desconsider column width and show all in the same row */
	.row.m-fit-all-tb { display: flex; flex-wrap: nowrap; }
}

/* -dt */
@media only screen and ( min-width: 900px ){
	/* Gutter */
	.row.m-gutter-dt { width: calc( 100% + var( --grid-gap ) ); margin-right: calc( var( --grid-gap ) * -1 ); /* margin-top: calc( var( --gap ) * -1 ); */ }
		.row.m-gutter-dt > .col { margin-right: var( --grid-gap ); /* margin-top: var( --gap ); */ }

		.row.m-no-gutter-dt { width: 100%; margin-right: 0; margin-top: 0; }
			.row.m-no-gutter-dt > .col { margin-right: 0; margin-top: 0; }


	/* Separated */
	.row.m-separated-dt {}
		.row.m-separated-dt > .col { padding-left: var( --gap ); padding-right: var( --gap ); }
		.row.m-separated-dt > .col + .col { border-left: 1px solid #333; }

		.row.m-no-separated-dt {}
			.row.m-no-separated-dt > .col { padding-left: 0; padding-right: 0; }
			.row.m-no-separated-dt > .col + .col { border-left: 0; }


	/* Reverse */
	.row.m-reverse-dt { flex-direction: row-reverse; }
		.row.m-reverse-dt.m-gutter > .col,
		.row.m-reverse.m-gutter-dt > .col {}

		.row.m-no-reverse-dt { flex-direction: row; }
			.row.m-no-reverse-dt.m-gutter > .col,
			.row.m-no-reverse.m-gutter-dt > .col {}


	/* Column */
	.row.m-column-dt { flex-direction: column; }
		.row.m-column-dt > .col { width: 100%; }

		.row.m-no-column-dt { flex-direction: row; }
			.row.m-no-column-dt > .col {}

		.row.m-column-dt.m-gutter,
		.row.m-column.m-gutter-dt {}
			.row.m-column-dt.m-gutter > .col,
			.row.m-column.m-gutter-dt > .col { width: calc( 100% - var( --grid-gap ) ); }


	/* Column Reverse */
	.row.m-column-dt.m-reverse,
	.row.m-column.m-reverse-dt { flex-direction: column-reverse; }
		.row.m-column-dt.m-reverse > .col,
		.row.m-column.m-reverse-dt > .col {}

		.row.m-column-dt.m-no-reverse,
		.row.m-column.m-no-reverse-dt { flex-direction: column; }
			.row.m-column-dt.m-no-reverse > .col,
			.row.m-column.m-no-reverse-dt > .col {}

		.row.m-no-column-dt.m-reverse,
		.row.m-no-column.m-reverse-dt { flex-direction: row-reverse; }
			.row.m-no-column-dt.m-reverse > .col,
			.row.m-no-column.m-reverse-dt > .col {}

		.row.m-column-dt.m-reverse.m-gutter,
		.row.m-column.m-reverse-dt.m-gutter,
		.row.m-column.m-reverse.m-gutter-dt {}
			.row.m-column-dt.m-reverse.m-gutter > .col,
			.row.m-column.m-reverse-dt.m-gutter > .col,
			.row.m-column.m-reverse.m-gutter-dt > .col {}


	/* inside padding */
	.row.m-padded-dt {}
		.row.m-padded-dt > .col { padding: var( --gap ); }

		.row.m-no-padded-dt {}
			.row.m-no-padded-dt > .col { padding: 0; }


	/* fit-all column, desconsider column width and show all in the same row */
	.row.m-fit-all-dt { display: flex; flex-wrap: nowrap; }
}

/* -xx */
@media only screen and ( min-width: 1440px ){
	/* Gutter */
	.row.m-gutter-xx { width: calc( 100% + var( --grid-gap ) ); margin-right: calc( var( --grid-gap ) * -1 ); /* margin-top: calc( var( --gap ) * -1 ); */ }
		.row.m-gutter-xx > .col { margin-right: var( --grid-gap ); /* margin-top: var( --gap ); */ }

		.row.m-no-gutter-xx { width: 100%; margin-right: 0; margin-top: 0; }
			.row.m-no-gutter-xx > .col { margin-right: 0; margin-top: 0; }


	/* Separated */
	.row.m-separated-xx {}
		.row.m-separated-xx > .col { padding-left: var( --gap ); padding-right: var( --gap ); }
		.row.m-separated-xx > .col + .col { border-left: 1px solid #333; }

		.row.m-no-separated-xx {}
			.row.m-no-separated-xx > .col { padding-left: 0; padding-right: 0; }
			.row.m-no-separated-xx > .col + .col { border-left: 0; }


	/* Reverse */
	.row.m-reverse-xx { flex-direction: row-reverse; }
		.row.m-reverse-xx.m-gutter > .col,
		.row.m-reverse.m-gutter-xx > .col {}

		.row.m-no-reverse-xx { flex-direction: row; }
			.row.m-no-reverse-xx.m-gutter > .col,
			.row.m-no-reverse.m-gutter-xx > .col {}


	/* Column */
	.row.m-column-xx { flex-direction: column; }
		.row.m-column-xx > .col { width: 100%; }

		.row.m-no-column-xx { flex-direction: row; }
			.row.m-no-column-xx > .col {}

		.row.m-column-xx.m-gutter,
		.row.m-column.m-gutter-xx {}
			.row.m-column-xx.m-gutter > .col,
			.row.m-column.m-gutter-xx > .col { width: calc( 100% - var( --gap ) ); }


	/* Column Reverse */
	.row.m-column-xx.m-reverse,
	.row.m-column.m-reverse-xx { flex-direction: column-reverse; }
		.row.m-column-xx.m-reverse > .col,
		.row.m-column.m-reverse-xx > .col {}

		.row.m-column-xx.m-no-reverse,
		.row.m-column.m-no-reverse-xx { flex-direction: column; }
			.row.m-column-xx.m-no-reverse > .col,
			.row.m-column.m-no-reverse-xx > .col {}

		.row.m-no-column-xx.m-reverse,
		.row.m-no-column.m-reverse-xx { flex-direction: row-reverse; }
			.row.m-no-column-xx.m-reverse > .col,
			.row.m-no-column.m-reverse-xx > .col {}

		.row.m-column-xx.m-reverse.m-gutter,
		.row.m-column.m-reverse-xx.m-gutter,
		.row.m-column.m-reverse.m-gutter-xx {}
			.row.m-column-xx.m-reverse.m-gutter > .col,
			.row.m-column.m-reverse-xx.m-gutter > .col,
			.row.m-column.m-reverse.m-gutter-xx > .col {}


	/* inside padding */
	.row.m-padded-xx {}
		.row.m-padded-xx > .col { padding: var( --grid-gap ); }

		.row.m-no-padded-xx {}
			.row.m-no-padded-xx > .col { padding: 0; }


	/* fit-all column, desconsider column width and show all in the same row */
	.row.m-fit-all-xx { display: flex; flex-wrap: nowrap; }
}