/*
-------------------

	Basekit . Layout v1

	Styles
	Jul . 2025

	© Exactuflow
	https://basekit.layout.exactusensu.pt/

	Url

		src: https://basekit.layout.exactusensu.pt/v1/src/
		cdn: https://cdn.exactusensu.pt/basekit/layout/v1/

	Boilerplate

		src: <script type="text/javascript" src="https://basekit.layout.exactusensu.pt/v1/src/"></script>
		cdn: <script type="text/javascript" src="https://cdn.exactusensu.pt/basekit/layout/v1/"></script>

-------------------
*/

/* Settings */

	:root {

		/* Grid */
		--grid-cols-count:	12;

		/* Gaps */
		--gap-default:	1.5rem;
		--gap:	  calc(var(--gap-default)			* var(--global-scale-factor));
		--gap-xs: calc(var(--gap-default) / 3		* var(--global-scale-factor));
		--gap-sm: calc(var(--gap-default) / 2		* var(--global-scale-factor));
		--gap-md: calc(var(--gap-default) * 1.25	* var(--global-scale-factor));
		--gap-lg: calc(var(--gap-default) * 1.5		* var(--global-scale-factor));
		--gap-xl: calc(var(--gap-default) * 2		* var(--global-scale-factor));

		/* Columns */
		--col-start: auto;
		--col-span: 1;

	}

/* Body */

	body, html {
		height: 100%;
	}

/* Grid system */

	/* Grid */

		h-grid {
			display: grid;
			grid-template-columns: repeat(var(--grid-cols-count), 1fr);
			gap: 0;
		}

	/* Grid . Global Spans */

		h-grid[cols-span="1"]  > * { --col-span: 1; }
		h-grid[cols-span="2"]  > * { --col-span: 2; }
		h-grid[cols-span="3"]  > * { --col-span: 3; }
		h-grid[cols-span="4"]  > * { --col-span: 4; }
		h-grid[cols-span="5"]  > * { --col-span: 5; }
		h-grid[cols-span="6"]  > * { --col-span: 6; }
		h-grid[cols-span="7"]  > * { --col-span: 7; }
		h-grid[cols-span="8"]  > * { --col-span: 8; }
		h-grid[cols-span="9"]  > * { --col-span: 9; }
		h-grid[cols-span="10"] > * { --col-span: 10;}
		h-grid[cols-span="11"] > * { --col-span: 11;}
		h-grid[cols-span="12"] > * { --col-span: 12;}

	/* Grid . Columns */

		/* Grid . Columns . Spans */

			h-grid > * {
			 	grid-column: var(--col-start) / span var(--col-span);
			}

			h-grid > *[col-span="1"]  { --col-span: 1; }
			h-grid > *[col-span="2"]  { --col-span: 2; }
			h-grid > *[col-span="3"]  { --col-span: 3; }
			h-grid > *[col-span="4"]  { --col-span: 4; }
			h-grid > *[col-span="5"]  { --col-span: 5; }
			h-grid > *[col-span="6"]  { --col-span: 6; }
			h-grid > *[col-span="7"]  { --col-span: 7; }
			h-grid > *[col-span="8"]  { --col-span: 8; }
			h-grid > *[col-span="9"]  { --col-span: 9; }
			h-grid > *[col-span="10"] { --col-span: 10; }
			h-grid > *[col-span="11"] { --col-span: 11; }
			h-grid > *[col-span="12"] { --col-span: 12; }

		/* Grid . Columns . Start */

			h-grid > [col-start="1"]  { --col-start: 1; }
			h-grid > [col-start="2"]  { --col-start: 2; }
			h-grid > [col-start="3"]  { --col-start: 3; }
			h-grid > [col-start="4"]  { --col-start: 4; }
			h-grid > [col-start="5"]  { --col-start: 5; }
			h-grid > [col-start="6"]  { --col-start: 6; }
			h-grid > [col-start="7"]  { --col-start: 7; }
			h-grid > [col-start="8"]  { --col-start: 8; }
			h-grid > [col-start="9"]  { --col-start: 9; }
			h-grid > [col-start="10"] { --col-start: 10; }
			h-grid > [col-start="11"] { --col-start: 11; }
			h-grid > [col-start="12"] { --col-start: 12; }

	/* Grid . Options . Gap */

		h-grid[gap],
		h-grid[gap="default"]	{ gap: var(--gap); }
		h-grid[gap="tiny"]		{ gap: var(--gap-xs); }
		h-grid[gap="small"]		{ gap: var(--gap-sm); }
		h-grid[gap="medium"]	{ gap: var(--gap-md); }
		h-grid[gap="large"]		{ gap: var(--gap-lg); }
		h-grid[gap="huge"]		{ gap: var(--gap-xl); }

		h-grid[gap="1"]  { gap: 1px; }
		h-grid[gap="5"]  { gap: 5px; }
		h-grid[gap="10"] { gap: 10px; }
		h-grid[gap="15"] { gap: 15px; }
		h-grid[gap="20"] { gap: 20px; }
		h-grid[gap="25"] { gap: 25px; }
		h-grid[gap="30"] { gap: 30px; }
		h-grid[gap="35"] { gap: 35px; }
		h-grid[gap="40"] { gap: 40px; }
		h-grid[gap="45"] { gap: 45px; }
		h-grid[gap="50"] { gap: 50px; }

	/* Grid . Breakpoints */

		/* Extra small only (≤ 576px) */
		@media (max-width: 575.98px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-xs-only  { --col-span: 1; }
				h-grid > .col-2-xs-only  { --col-span: 2; }
				h-grid > .col-3-xs-only  { --col-span: 3; }
				h-grid > .col-4-xs-only  { --col-span: 4; }
				h-grid > .col-5-xs-only  { --col-span: 5; }
				h-grid > .col-6-xs-only  { --col-span: 6; }
				h-grid > .col-7-xs-only  { --col-span: 7; }
				h-grid > .col-8-xs-only  { --col-span: 8; }
				h-grid > .col-9-xs-only  { --col-span: 9; }
				h-grid > .col-10-xs-only { --col-span: 10; }
				h-grid > .col-11-xs-only { --col-span: 11; }
				h-grid > .col-12-xs-only { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-xs-only  { --col-start: 1; }
				h-grid > .col-start-2-xs-only  { --col-start: 2; }
				h-grid > .col-start-3-xs-only  { --col-start: 3; }
				h-grid > .col-start-4-xs-only  { --col-start: 4; }
				h-grid > .col-start-5-xs-only  { --col-start: 5; }
				h-grid > .col-start-6-xs-only  { --col-start: 6; }
				h-grid > .col-start-7-xs-only  { --col-start: 7; }
				h-grid > .col-start-8-xs-only  { --col-start: 8; }
				h-grid > .col-start-9-xs-only  { --col-start: 9; }
				h-grid > .col-start-10-xs-only { --col-start: 10; }
				h-grid > .col-start-11-xs-only { --col-start: 11; }

			/* Grid . Gap */

				.gap-xs-only,
				.gap-default-xs-only	{ gap: var(--gap)		!important; }
				.gap-tiny-xs-only		{ gap: var(--gap-xs)	!important; }
				.gap-small-xs-only		{ gap: var(--gap-sm)	!important; }
				.gap-medium-xs-only		{ gap: var(--gap-md)	!important; }
				.gap-large-xs-only		{ gap: var(--gap-lg)	!important; }
				.gap-huge-xs-only		{ gap: var(--gap-xl)	!important; }
				.gap-1-xs-only  		{ gap: 1px  			!important; }
				.gap-5-xs-only 			{ gap: 5px  			!important; }
				.gap-10-xs-only 		{ gap: 10px 			!important; }
				.gap-15-xs-only 		{ gap: 15px 			!important; }
				.gap-20-xs-only 		{ gap: 20px 			!important; }
				.gap-25-xs-only 		{ gap: 25px 			!important; }
				.gap-30-xs-only 		{ gap: 30px 			!important; }
				.gap-35-xs-only 		{ gap: 35px 			!important; }
				.gap-40-xs-only 		{ gap: 40px 			!important; }
				.gap-45-xs-only 		{ gap: 45px 			!important; }
				.gap-50-xs-only 		{ gap: 50px 			!important; }

		}

		/* Small and above (≥ 576px) */
		@media (min-width: 576px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-sm  { --col-span: 1; }
				h-grid > .col-2-sm  { --col-span: 2; }
				h-grid > .col-3-sm  { --col-span: 3; }
				h-grid > .col-4-sm  { --col-span: 4; }
				h-grid > .col-5-sm  { --col-span: 5; }
				h-grid > .col-6-sm  { --col-span: 6; }
				h-grid > .col-7-sm  { --col-span: 7; }
				h-grid > .col-8-sm  { --col-span: 8; }
				h-grid > .col-9-sm  { --col-span: 9; }
				h-grid > .col-10-sm { --col-span: 10; }
				h-grid > .col-11-sm { --col-span: 11; }
				h-grid > .col-12-sm { --col-span: 12; }

			/* Grid . Columns . Start */
				
				h-grid > .col-start-1-sm  { --col-start: 1; }
				h-grid > .col-start-2-sm  { --col-start: 2; }
				h-grid > .col-start-3-sm  { --col-start: 3; }
				h-grid > .col-start-4-sm  { --col-start: 4; }
				h-grid > .col-start-5-sm  { --col-start: 5; }
				h-grid > .col-start-6-sm  { --col-start: 6; }
				h-grid > .col-start-7-sm  { --col-start: 7; }
				h-grid > .col-start-8-sm  { --col-start: 8; }
				h-grid > .col-start-9-sm  { --col-start: 9; }
				h-grid > .col-start-10-sm { --col-start: 10; }
				h-grid > .col-start-11-sm { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-sm,
				.gap-default-sm	{ gap: var(--gap)		!important; }
				.gap-tiny-sm	{ gap: var(--gap-xs)	!important; }
				.gap-small-sm	{ gap: var(--gap-sm)	!important; }
				.gap-medium-sm	{ gap: var(--gap-md)	!important; }
				.gap-large-sm	{ gap: var(--gap-lg)	!important; }
				.gap-huge-sm	{ gap: var(--gap-xl)	!important; }
				.gap-1-sm  		{ gap: 1px  			!important; }
				.gap-5-sm  		{ gap: 5px  			!important; }
				.gap-10-sm 		{ gap: 10px 			!important; }
				.gap-15-sm 		{ gap: 15px 			!important; }
				.gap-20-sm 		{ gap: 20px 			!important; }
				.gap-25-sm 		{ gap: 25px 			!important; }
				.gap-30-sm 		{ gap: 30px 			!important; }
				.gap-35-sm 		{ gap: 35px 			!important; }
				.gap-40-sm 		{ gap: 40px 			!important; }
				.gap-45-sm 		{ gap: 45px 			!important; }
				.gap-50-sm 		{ gap: 50px 			!important; }

		}

		/* Small only (576px–767.98px) */
		@media (min-width: 576px) and (max-width: 767.98px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-sm-only  { --col-span: 1; }
				h-grid > .col-2-sm-only  { --col-span: 2; }
				h-grid > .col-3-sm-only  { --col-span: 3; }
				h-grid > .col-4-sm-only  { --col-span: 4; }
				h-grid > .col-5-sm-only  { --col-span: 5; }
				h-grid > .col-6-sm-only  { --col-span: 6; }
				h-grid > .col-7-sm-only  { --col-span: 7; }
				h-grid > .col-8-sm-only  { --col-span: 8; }
				h-grid > .col-9-sm-only  { --col-span: 9; }
				h-grid > .col-10-sm-only { --col-span: 10; }
				h-grid > .col-11-sm-only { --col-span: 11; }
				h-grid > .col-12-sm-only { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-sm-only  { --col-start: 1; }
				h-grid > .col-start-2-sm-only  { --col-start: 2; }
				h-grid > .col-start-3-sm-only  { --col-start: 3; }
				h-grid > .col-start-4-sm-only  { --col-start: 4; }
				h-grid > .col-start-5-sm-only  { --col-start: 5; }
				h-grid > .col-start-6-sm-only  { --col-start: 6; }
				h-grid > .col-start-7-sm-only  { --col-start: 7; }
				h-grid > .col-start-8-sm-only  { --col-start: 8; }
				h-grid > .col-start-9-sm-only  { --col-start: 9; }
				h-grid > .col-start-10-sm-only { --col-start: 10; }
				h-grid > .col-start-11-sm-only { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-sm-only,
				.gap-default-sm-only	{ gap: var(--gap)		!important; }
				.gap-tiny-sm-only		{ gap: var(--gap-xs)	!important; }
				.gap-small-sm-only		{ gap: var(--gap-sm)	!important; }
				.gap-medium-sm-only		{ gap: var(--gap-md)	!important; }
				.gap-large-sm-only		{ gap: var(--gap-lg)	!important; }
				.gap-huge-sm-only		{ gap: var(--gap-xl)	!important; }
				.gap-1-sm-only  		{ gap: 1px  			!important; }
				.gap-5-sm-only  		{ gap: 5px  			!important; }
				.gap-10-sm-only 		{ gap: 10px 			!important; }
				.gap-15-sm-only 		{ gap: 15px 			!important; }
				.gap-20-sm-only 		{ gap: 20px 			!important; }
				.gap-25-sm-only 		{ gap: 25px 			!important; }
				.gap-30-sm-only 		{ gap: 30px 			!important; }
				.gap-35-sm-only 		{ gap: 35px 			!important; }
				.gap-40-sm-only 		{ gap: 40px 			!important; }
				.gap-45-sm-only 		{ gap: 45px 			!important; }
				.gap-50-sm-only 		{ gap: 50px 			!important; }

		}

		/* Medium and above (≥ 768px) */
		@media (min-width: 768px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-md  { --col-span: 1; }
				h-grid > .col-2-md  { --col-span: 2; }
				h-grid > .col-3-md  { --col-span: 3; }
				h-grid > .col-4-md  { --col-span: 4; }
				h-grid > .col-5-md  { --col-span: 5; }
				h-grid > .col-6-md  { --col-span: 6; }
				h-grid > .col-7-md  { --col-span: 7; }
				h-grid > .col-8-md  { --col-span: 8; }
				h-grid > .col-9-md  { --col-span: 9; }
				h-grid > .col-10-md { --col-span: 10; }
				h-grid > .col-11-md { --col-span: 11; }
				h-grid > .col-12-md { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-md  { --col-start: 1; }
				h-grid > .col-start-2-md  { --col-start: 2; }
				h-grid > .col-start-3-md  { --col-start: 3; }
				h-grid > .col-start-4-md  { --col-start: 4; }
				h-grid > .col-start-5-md  { --col-start: 5; }
				h-grid > .col-start-6-md  { --col-start: 6; }
				h-grid > .col-start-7-md  { --col-start: 7; }
				h-grid > .col-start-8-md  { --col-start: 8; }
				h-grid > .col-start-9-md  { --col-start: 9; }
				h-grid > .col-start-10-md { --col-start: 10; }
				h-grid > .col-start-11-md { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-md,
				.gap-default-md	{ gap: var(--gap)		!important; }
				.gap-tiny-md	{ gap: var(--gap-xs)	!important; }
				.gap-small-md	{ gap: var(--gap-sm)	!important; }
				.gap-medium-md	{ gap: var(--gap-md)	!important; }
				.gap-large-md	{ gap: var(--gap-lg)	!important; }
				.gap-huge-md	{ gap: var(--gap-xl)	!important; }
				.gap-1-md  		{ gap: 1px  			!important; }
				.gap-5-md  		{ gap: 5px  			!important; }
				.gap-10-md 		{ gap: 10px 			!important; }
				.gap-15-md 		{ gap: 15px 			!important; }
				.gap-20-md 		{ gap: 20px 			!important; }
				.gap-25-md 		{ gap: 25px 			!important; }
				.gap-30-md 		{ gap: 30px 			!important; }
				.gap-35-md 		{ gap: 35px 			!important; }
				.gap-40-md 		{ gap: 40px 			!important; }
				.gap-45-md 		{ gap: 45px 			!important; }
				.gap-50-md 		{ gap: 50px 			!important; }

		}

		/* Medium only (768px–991.98px) */
		@media (min-width: 768px) and (max-width: 991.98px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-md-only  { --col-span: 1; }
				h-grid > .col-2-md-only  { --col-span: 2; }
				h-grid > .col-3-md-only  { --col-span: 3; }
				h-grid > .col-4-md-only  { --col-span: 4; }
				h-grid > .col-5-md-only  { --col-span: 5; }
				h-grid > .col-6-md-only  { --col-span: 6; }
				h-grid > .col-7-md-only  { --col-span: 7; }
				h-grid > .col-8-md-only  { --col-span: 8; }
				h-grid > .col-9-md-only  { --col-span: 9; }
				h-grid > .col-10-md-only { --col-span: 10; }
				h-grid > .col-11-md-only { --col-span: 11; }
				h-grid > .col-12-md-only { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-md-only  { --col-start: 1; }
				h-grid > .col-start-2-md-only  { --col-start: 2; }
				h-grid > .col-start-3-md-only  { --col-start: 3; }
				h-grid > .col-start-4-md-only  { --col-start: 4; }
				h-grid > .col-start-5-md-only  { --col-start: 5; }
				h-grid > .col-start-6-md-only  { --col-start: 6; }
				h-grid > .col-start-7-md-only  { --col-start: 7; }
				h-grid > .col-start-8-md-only  { --col-start: 8; }
				h-grid > .col-start-9-md-only  { --col-start: 9; }
				h-grid > .col-start-10-md-only { --col-start: 10; }
				h-grid > .col-start-11-md-only { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-md-only,
				.gap-default-md-only	{ gap: var(--gap)		!important; }
				.gap-tiny-md-only		{ gap: var(--gap-xs)	!important; }
				.gap-small-md-only		{ gap: var(--gap-sm)	!important; }
				.gap-medium-md-only		{ gap: var(--gap-md)	!important; }
				.gap-large-md-only		{ gap: var(--gap-lg)	!important; }
				.gap-huge-md-only		{ gap: var(--gap-xl)	!important; }
				.gap-1-md-only  		{ gap: 1px  			!important; }
				.gap-5-md-only  		{ gap: 5px  			!important; }
				.gap-10-md-only 		{ gap: 10px 			!important; }
				.gap-15-md-only 		{ gap: 15px 			!important; }
				.gap-20-md-only 		{ gap: 20px 			!important; }
				.gap-25-md-only 		{ gap: 25px 			!important; }
				.gap-30-md-only 		{ gap: 30px 			!important; }
				.gap-35-md-only 		{ gap: 35px 			!important; }
				.gap-40-md-only 		{ gap: 40px 			!important; }
				.gap-45-md-only 		{ gap: 45px 			!important; }
				.gap-50-md-only 		{ gap: 50px 			!important; }

		}

		/* Large and above (≥ 992px) */
		@media (min-width: 992px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-lg  { --col-span: 1; }
				h-grid > .col-2-lg  { --col-span: 2; }
				h-grid > .col-3-lg  { --col-span: 3; }
				h-grid > .col-4-lg  { --col-span: 4; }
				h-grid > .col-5-lg  { --col-span: 5; }
				h-grid > .col-6-lg  { --col-span: 6; }
				h-grid > .col-7-lg  { --col-span: 7; }
				h-grid > .col-8-lg  { --col-span: 8; }
				h-grid > .col-9-lg  { --col-span: 9; }
				h-grid > .col-10-lg { --col-span: 10; }
				h-grid > .col-11-lg { --col-span: 11; }
				h-grid > .col-12-lg { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-lg  { --col-start: 1; }
				h-grid > .col-start-2-lg  { --col-start: 2; }
				h-grid > .col-start-3-lg  { --col-start: 3; }
				h-grid > .col-start-4-lg  { --col-start: 4; }
				h-grid > .col-start-5-lg  { --col-start: 5; }
				h-grid > .col-start-6-lg  { --col-start: 6; }
				h-grid > .col-start-7-lg  { --col-start: 7; }
				h-grid > .col-start-8-lg  { --col-start: 8; }
				h-grid > .col-start-9-lg  { --col-start: 9; }
				h-grid > .col-start-10-lg { --col-start: 10; }
				h-grid > .col-start-11-lg { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-lg,
				.gap-default-lg	{ gap: var(--gap)		!important; }
				.gap-tiny-lg	{ gap: var(--gap-xs)	!important; }
				.gap-small-lg	{ gap: var(--gap-sm)	!important; }
				.gap-medium-lg	{ gap: var(--gap-md)	!important; }
				.gap-large-lg	{ gap: var(--gap-lg)	!important; }
				.gap-huge-lg	{ gap: var(--gap-xl)	!important; }
				.gap-1-lg  		{ gap: 1px  			!important; }
				.gap-5-lg  		{ gap: 5px  			!important; }
				.gap-10-lg 		{ gap: 10px 			!important; }
				.gap-15-lg 		{ gap: 15px 			!important; }
				.gap-20-lg 		{ gap: 20px 			!important; }
				.gap-25-lg 		{ gap: 25px 			!important; }
				.gap-30-lg 		{ gap: 30px 			!important; }
				.gap-35-lg 		{ gap: 35px 			!important; }
				.gap-40-lg 		{ gap: 40px 			!important; }
				.gap-45-lg 		{ gap: 45px 			!important; }
				.gap-50-lg 		{ gap: 50px 			!important; }

		}

		/* Large only (992px–1199.98px) */
		@media (min-width: 992px) and (max-width: 1199.98px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-lg-only  { --col-span: 1; }
				h-grid > .col-2-lg-only  { --col-span: 2; }
				h-grid > .col-3-lg-only  { --col-span: 3; }
				h-grid > .col-4-lg-only  { --col-span: 4; }
				h-grid > .col-5-lg-only  { --col-span: 5; }
				h-grid > .col-6-lg-only  { --col-span: 6; }
				h-grid > .col-7-lg-only  { --col-span: 7; }
				h-grid > .col-8-lg-only  { --col-span: 8; }
				h-grid > .col-9-lg-only  { --col-span: 9; }
				h-grid > .col-10-lg-only { --col-span: 10; }
				h-grid > .col-11-lg-only { --col-span: 11; }
				h-grid > .col-12-lg-only { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-lg-only  { --col-start: 1; }
				h-grid > .col-start-2-lg-only  { --col-start: 2; }
				h-grid > .col-start-3-lg-only  { --col-start: 3; }
				h-grid > .col-start-4-lg-only  { --col-start: 4; }
				h-grid > .col-start-5-lg-only  { --col-start: 5; }
				h-grid > .col-start-6-lg-only  { --col-start: 6; }
				h-grid > .col-start-7-lg-only  { --col-start: 7; }
				h-grid > .col-start-8-lg-only  { --col-start: 8; }
				h-grid > .col-start-9-lg-only  { --col-start: 9; }
				h-grid > .col-start-10-lg-only { --col-start: 10; }
				h-grid > .col-start-11-lg-only { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-lg-only,
				.gap-default-lg-only	{ gap: var(--gap)		!important; }
				.gap-tiny-lg-only		{ gap: var(--gap-xs)	!important; }
				.gap-small-lg-only		{ gap: var(--gap-sm)	!important; }
				.gap-medium-lg-only		{ gap: var(--gap-md)	!important; }
				.gap-large-lg-only		{ gap: var(--gap-lg)	!important; }
				.gap-huge-lg-only		{ gap: var(--gap-xl)	!important; }
				.gap-1-lg-only  		{ gap: 1px  			!important; }
				.gap-5-lg-only  		{ gap: 5px  			!important; }
				.gap-10-lg-only 		{ gap: 10px 			!important; }
				.gap-15-lg-only 		{ gap: 15px 			!important; }
				.gap-20-lg-only 		{ gap: 20px 			!important; }
				.gap-25-lg-only 		{ gap: 25px 			!important; }
				.gap-30-lg-only 		{ gap: 30px 			!important; }
				.gap-35-lg-only 		{ gap: 35px 			!important; }
				.gap-40-lg-only 		{ gap: 40px 			!important; }
				.gap-45-lg-only 		{ gap: 45px 			!important; }
				.gap-50-lg-only 		{ gap: 50px 			!important; }

		}

		/* Extra large and above (≥1200px) */
		@media (min-width: 1200px) {

			/* Resets */

				h-grid > * { --col-start: auto; }

			/* Grid . Columns . Span */

				h-grid > .col-1-xl  { --col-span: 1; }
				h-grid > .col-2-xl  { --col-span: 2; }
				h-grid > .col-3-xl  { --col-span: 3; }
				h-grid > .col-4-xl  { --col-span: 4; }
				h-grid > .col-5-xl  { --col-span: 5; }
				h-grid > .col-6-xl  { --col-span: 6; }
				h-grid > .col-7-xl  { --col-span: 7; }
				h-grid > .col-8-xl  { --col-span: 8; }
				h-grid > .col-9-xl  { --col-span: 9; }
				h-grid > .col-10-xl { --col-span: 10; }
				h-grid > .col-11-xl { --col-span: 11; }
				h-grid > .col-12-xl { --col-span: 12; }

			/* Grid . Columns . Start */

				h-grid > .col-start-1-xl  { --col-start: 1; }
				h-grid > .col-start-2-xl  { --col-start: 2; }
				h-grid > .col-start-3-xl  { --col-start: 3; }
				h-grid > .col-start-4-xl  { --col-start: 4; }
				h-grid > .col-start-5-xl  { --col-start: 5; }
				h-grid > .col-start-6-xl  { --col-start: 6; }
				h-grid > .col-start-7-xl  { --col-start: 7; }
				h-grid > .col-start-8-xl  { --col-start: 8; }
				h-grid > .col-start-9-xl  { --col-start: 9; }
				h-grid > .col-start-10-xl { --col-start: 10; }
				h-grid > .col-start-11-xl { --col-start: 11; }

			/* Grid . Options . Gap */

				.gap-xl,
				.gap-default-xl	{ gap: var(--gap)		!important; }
				.gap-tiny-xl	{ gap: var(--gap-xs)	!important; }
				.gap-small-xl	{ gap: var(--gap-sm)	!important; }
				.gap-medium-xl	{ gap: var(--gap-md)	!important; }
				.gap-large-xl	{ gap: var(--gap-lg)	!important; }
				.gap-huge-xl	{ gap: var(--gap-xl)	!important; }
				.gap-1-xl  		{ gap: 1px  			!important; }
				.gap-5-xl  		{ gap: 5px  			!important; }
				.gap-10-xl 		{ gap: 10px 			!important; }
				.gap-15-xl 		{ gap: 15px 			!important; }
				.gap-20-xl 		{ gap: 20px 			!important; }
				.gap-25-xl 		{ gap: 25px 			!important; }
				.gap-30-xl 		{ gap: 30px 			!important; }
				.gap-35-xl 		{ gap: 35px 			!important; }
				.gap-40-xl 		{ gap: 40px 			!important; }
				.gap-45-xl 		{ gap: 45px 			!important; }
				.gap-50-xl 		{ gap: 50px 			!important; }

		}

/* Flex system */

	/* Flex */

		v-flex,
		h-flex {
			display: flex;
			gap: 0px;
			padding: 0px;
			box-sizing: border-box;
		}

		v-flex > *,
		h-flex > * {
			flex-shrink: 0;
		}

	/* Flex . Vertical */

		v-flex {
			flex-direction: column;
			min-height: 0;
		}

		v-flex > * {
			overflow-y: hidden;
		}

	/* Flex . Horizontal */

		h-flex {
			flex-direction: row;
			flex-wrap: wrap;
		}

		h-flex > * {
			overflow-x: hidden;
		}

	/* Flex . Auto sizing */

		v-flex[conform-viewport] {
			flex: 1 1 auto;
			height: 100vh;
		}

		h-flex[conform-viewport] {
			flex: 1 1 auto;
			width: 100vw;
		}

		v-flex[conform-parent] {
			flex: 1 1 auto;
			min-height: 0;
		}

		h-flex[conform-parent] {
			flex: 1 1 auto;
			min-height: 100%;
			width: 100%;
		}

		v-flex > *[expand],
		h-flex > *[expand] {
			flex: 1 1 auto;
			flex-shrink: 0;
			min-width: 0;
		}

		v-flex > *[expand="2"],
		h-flex > *[expand="2"] {
			flex: 2 1 auto;
		}

		v-flex > *[expand="3"],
		h-flex > *[expand="3"] {
			flex: 3 1 auto;
		}

		v-flex > *[expand="4"],
		h-flex > *[expand="4"] {
			flex: 4 1 auto;
		}

	/* Flex . Custom sizing */

		v-flex > *[h-half],
		h-flex > *[w-half] {
			flex-basis: 50%;
		}

		v-flex > *[h-quarter],
		h-flex > *[w-quarter] {
			flex-basis: 25%;
		}

		v-flex > *[h-third],
		h-flex > *[w-third] {
			flex-basis: 33.33%;
		}

		v-flex > *[h-full],
		h-flex > *[w-full] {
			flex-basis: 100%;
		}

	/* Flex . Options . Scroll */

		v-flex > *[scroll]{
			overflow-y: auto;
		}

		h-flex > *[scroll] {
			overflow-x: auto;
		}

	/* Flex . Options . Shrink */

		v-flex > *[shrink],
		h-flex > *[shrink] {
			flex-shrink: 1;
		}

	/* Flex . Options . No Wrap */

		h-flex[no-wrap]{
			flex-wrap: nowrap;
		}

		h-flex > *[no-wrap] {
			white-space: nowrap;
			overflow: hidden;
		}

	/* Flex . Options . Truncate */

		v-flex > *[truncate],
		h-flex > *[truncate] {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

	/* Flex . Options . Align */

		v-flex[align="start"],
		h-flex[align="start"] {
			align-items: flex-start;
		}

		v-flex[align="center"],
		h-flex[align="center"] {
			align-items: center;
		}

		v-flex[align="end"],
		h-flex[align="end"] {
			align-items: flex-end;
		}

		v-flex[align="stretch"],
		h-flex[align="stretch"] {
			align-items: stretch;
		}

	/* Flex . Options . Justify */

		v-flex[justify="start"],
		h-flex[justify="start"] {
			justify-content: flex-start;
		}

		v-flex[justify="center"],
		h-flex[justify="center"] {
			justify-content: center;
		}

		v-flex[justify="end"],
		h-flex[justify="end"] {
			justify-content: flex-end;
		}

		v-flex[justify="space-between"],
		h-flex[justify="space-between"] {
			justify-content: space-between;
		}

		v-flex[justify="space-around"],
		h-flex[justify="space-around"] {
			justify-content: space-around;
		}

		v-flex[justify="space-evenly"],
		h-flex[justify="space-evenly"] {
			justify-content: space-evenly;
		}

	/* Flex . Options . Gap */

		h-flex[gap],		   v-flex[gap],
		h-flex[gap="default"], v-flex[gap="default"]{ gap: var(--gap); }
		h-flex[gap="tiny"],    v-flex[gap="tiny"]	{ gap: var(--gap-xs); }
		h-flex[gap="small"],   v-flex[gap="small"]	{ gap: var(--gap-sm); }
		h-flex[gap="medium"],  v-flex[gap="medium"]	{ gap: var(--gap-md); }
		h-flex[gap="large"],   v-flex[gap="large"]	{ gap: var(--gap-lg); }
		h-flex[gap="huge"],    v-flex[gap="huge"]	{ gap: var(--gap-xl); }

		h-flex[gap="1"],  v-flex[gap="1"]  { gap: 1px; }
		h-flex[gap="5"],  v-flex[gap="5"]  { gap: 5px; }
		h-flex[gap="10"], v-flex[gap="10"] { gap: 10px; }
		h-flex[gap="15"], v-flex[gap="15"] { gap: 15px; }
		h-flex[gap="20"], v-flex[gap="20"] { gap: 20px; }
		h-flex[gap="25"], v-flex[gap="25"] { gap: 25px; }
		h-flex[gap="30"], v-flex[gap="30"] { gap: 30px; }
		h-flex[gap="35"], v-flex[gap="35"] { gap: 35px; }
		h-flex[gap="40"], v-flex[gap="40"] { gap: 40px; }
		h-flex[gap="45"], v-flex[gap="45"] { gap: 45px; }
		h-flex[gap="50"], v-flex[gap="50"] { gap: 50px; }

	/* Flex . Breakpoints */

		/* Extra small only (≤ 576px) */
		@media (max-width: 575.98px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-xs-only {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-xs-only {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-xs-only {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-xs-only {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-xs-only,
				h-flex > *.expand-xs-only {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-xs-only,
				h-flex > *.w-half-xs-only {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-xs-only,
				h-flex > *.w-quarter-xs-only {
					flex-basis: 25%;
				}

				v-flex > *.h-third-xs-only,
				h-flex > *.w-third-xs-only {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-xs-only,
				h-flex > *.w-full-xs-only {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-xs-only {
					overflow-y: auto;
				}

				h-flex > *.scroll-xs-only {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-xs-only,
				h-flex > *.shrink-xs-only {
					flex-shrink: 1;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-xs-only {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-xs-only,
				h-flex > *.truncate-xs-only {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-xs-only,
				h-flex > *.align-start-xs-only {
					align-items: flex-start;
				}

				v-flex > *.align-center-xs-only,
				h-flex > *.align-center-xs-only {
					align-items: center;
				}

				v-flex > *.align-end-xs-only,
				h-flex > *.align-end-xs-only {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-xs-only,
				h-flex > *.align-stretch-xs-only {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-xs-only,
				h-flex > *.justify-start-xs-only {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-xs-only,
				h-flex > *.justify-center-xs-only {
					justify-content: center;
				}

				v-flex > *.justify-end-xs-only,
				h-flex > *.justify-end-xs-only {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-xs-only,
				h-flex > *.justify-space-between-xs-only {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-xs-only,
				h-flex > *.justify-space-around-xs-only {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-xs-only,
				h-flex > *.justify-space-evenly-xs-only {
					justify-content: space-evenly;
				}

		}

		/* Small and above (≥ 576px) */
		@media (min-width: 576px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-sm {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-sm {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-sm {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-sm {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-sm,
				h-flex > *.expand-sm {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-sm,
				h-flex > *.w-half-sm {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-sm,
				h-flex > *.w-quarter-sm {
					flex-basis: 25%;
				}

				v-flex > *.h-third-sm,
				h-flex > *.w-third-sm {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-sm,
				h-flex > *.w-full-sm {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-sm {
					overflow-y: auto;
				}

				h-flex > *.scroll-sm {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-sm,
				h-flex > *.shrink-sm {
					flex-shrink: 2;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-sm {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-sm,
				h-flex > *.truncate-sm {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-sm,
				h-flex > *.align-start-sm {
					align-items: flex-start;
				}

				v-flex > *.align-center-sm,
				h-flex > *.align-center-sm {
					align-items: center;
				}

				v-flex > *.align-end-sm,
				h-flex > *.align-end-sm {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-sm,
				h-flex > *.align-stretch-sm {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-sm,
				h-flex > *.justify-start-sm {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-sm,
				h-flex > *.justify-center-sm {
					justify-content: center;
				}

				v-flex > *.justify-end-sm,
				h-flex > *.justify-end-sm {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-sm,
				h-flex > *.justify-space-between-sm {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-sm,
				h-flex > *.justify-space-around-sm {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-sm,
				h-flex > *.justify-space-evenly-sm {
					justify-content: space-evenly;
				}

		}

		/* Small only (576px–767.98px) */
		@media (min-width: 576px) and (max-width: 767.98px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-sm-only {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-sm-only {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-sm-only {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-sm-only {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-sm-only,
				h-flex > *.expand-sm-only {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-sm-only,
				h-flex > *.w-half-sm-only {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-sm-only,
				h-flex > *.w-quarter-sm-only {
					flex-basis: 25%;
				}

				v-flex > *.h-third-sm-only,
				h-flex > *.w-third-sm-only {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-sm-only,
				h-flex > *.w-full-sm-only {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-sm-only {
					overflow-y: auto;
				}

				h-flex > *.scroll-sm-only {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-sm-only,
				h-flex > *.shrink-sm-only {
					flex-shrink: 0;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-sm-only {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-sm-only,
				h-flex > *.truncate-sm-only {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-sm-only,
				h-flex > *.align-start-sm-only {
					align-items: flex-start;
				}

				v-flex > *.align-center-sm-only,
				h-flex > *.align-center-sm-only {
					align-items: center;
				}

				v-flex > *.align-end-sm-only,
				h-flex > *.align-end-sm-only {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-sm-only,
				h-flex > *.align-stretch-sm-only {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-sm-only,
				h-flex > *.justify-start-sm-only {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-sm-only,
				h-flex > *.justify-center-sm-only {
					justify-content: center;
				}

				v-flex > *.justify-end-sm-only,
				h-flex > *.justify-end-sm-only {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-sm-only,
				h-flex > *.justify-space-between-sm-only {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-sm-only,
				h-flex > *.justify-space-around-sm-only {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-sm-only,
				h-flex > *.justify-space-evenly-sm-only {
					justify-content: space-evenly;
				}

		}

		/* Medium and above (≥ 768px) */
		@media (min-width: 768px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-md {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-md {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-md {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-md {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-md,
				h-flex > *.expand-md {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-md,
				h-flex > *.w-half-md {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-md,
				h-flex > *.w-quarter-md {
					flex-basis: 25%;
				}

				v-flex > *.h-third-md,
				h-flex > *.w-third-md {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-md,
				h-flex > *.w-full-md {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-md {
					overflow-y: auto;
				}

				h-flex > *.scroll-md {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-md,
				h-flex > *.shrink-md {
					flex-shrink: 0;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-md {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-md,
				h-flex > *.truncate-md {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-md,
				h-flex > *.align-start-md {
					align-items: flex-start;
				}

				v-flex > *.align-center-md,
				h-flex > *.align-center-md {
					align-items: center;
				}

				v-flex > *.align-end-md,
				h-flex > *.align-end-md {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-md,
				h-flex > *.align-stretch-md {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-md,
				h-flex > *.justify-start-md {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-md,
				h-flex > *.justify-center-md {
					justify-content: center;
				}

				v-flex > *.justify-end-md,
				h-flex > *.justify-end-md {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-md,
				h-flex > *.justify-space-between-md {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-md,
				h-flex > *.justify-space-around-md {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-md,
				h-flex > *.justify-space-evenly-md {
					justify-content: space-evenly;
				}

		}

		/* Medium only (768px–991.98px) */
		@media (min-width: 768px) and (max-width: 991.98px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-md-only {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-md-only {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-md-only {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-md-only {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-md-only,
				h-flex > *.expand-md-only {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-md-only,
				h-flex > *.w-half-md-only {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-md-only,
				h-flex > *.w-quarter-md-only {
					flex-basis: 25%;
				}

				v-flex > *.h-third-md-only,
				h-flex > *.w-third-md-only {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-md-only,
				h-flex > *.w-full-md-only {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-md-only {
					overflow-y: auto;
				}

				h-flex > *.scroll-md-only {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-md-only,
				h-flex > *.shrink-md-only {
					flex-shrink: 0;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-md-only {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-md-only,
				h-flex > *.truncate-md-only {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-md-only,
				h-flex > *.align-start-md-only {
					align-items: flex-start;
				}

				v-flex > *.align-center-md-only,
				h-flex > *.align-center-md-only {
					align-items: center;
				}

				v-flex > *.align-end-md-only,
				h-flex > *.align-end-md-only {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-md-only,
				h-flex > *.align-stretch-md-only {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-md-only,
				h-flex > *.justify-start-md-only {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-md-only,
				h-flex > *.justify-center-md-only {
					justify-content: center;
				}

				v-flex > *.justify-end-md-only,
				h-flex > *.justify-end-md-only {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-md-only,
				h-flex > *.justify-space-between-md-only {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-md-only,
				h-flex > *.justify-space-around-md-only {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-md-only,
				h-flex > *.justify-space-evenly-md-only {
					justify-content: space-evenly;
				}

		}

		/* Large and above (≥ 992px) */
		@media (min-width: 992px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-lg {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-lg {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-lg {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-lg {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-lg,
				h-flex > *.expand-lg {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-lg,
				h-flex > *.w-half-lg {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-lg,
				h-flex > *.w-quarter-lg {
					flex-basis: 25%;
				}

				v-flex > *.h-third-lg,
				h-flex > *.w-third-lg {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-lg,
				h-flex > *.w-full-lg {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-lg {
					overflow-y: auto;
				}

				h-flex > *.scroll-lg {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-lg,
				h-flex > *.shrink-lg {
					flex-shrink: 0;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-lg {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-lg,
				h-flex > *.truncate-lg {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-lg,
				h-flex > *.align-start-lg {
					align-items: flex-start;
				}

				v-flex > *.align-center-lg,
				h-flex > *.align-center-lg {
					align-items: center;
				}

				v-flex > *.align-end-lg,
				h-flex > *.align-end-lg {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-lg,
				h-flex > *.align-stretch-lg {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-lg,
				h-flex > *.justify-start-lg {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-lg,
				h-flex > *.justify-center-lg {
					justify-content: center;
				}

				v-flex > *.justify-end-lg,
				h-flex > *.justify-end-lg {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-lg,
				h-flex > *.justify-space-between-lg {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-lg,
				h-flex > *.justify-space-around-lg {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-lg,
				h-flex > *.justify-space-evenly-lg {
					justify-content: space-evenly;
				}

		}

		/* Large only (992px–1199.98px) */
		@media (min-width: 992px) and (max-width: 1199.98px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-lg-only {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-lg-only {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-lg-only {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-lg-only {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-lg-only,
				h-flex > *.expand-lg-only {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-lg-only,
				h-flex > *.w-half-lg-only {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-lg-only,
				h-flex > *.w-quarter-lg-only {
					flex-basis: 25%;
				}

				v-flex > *.h-third-lg-only,
				h-flex > *.w-third-lg-only {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-lg-only,
				h-flex > *.w-full-lg-only {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-lg-only {
					overflow-y: auto;
				}

				h-flex > *.scroll-lg-only {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-lg-only,
				h-flex > *.shrink-lg-only {
					flex-shrink: 0;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-lg-only {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-lg-only,
				h-flex > *.truncate-lg-only {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-lg-only,
				h-flex > *.align-start-lg-only {
					align-items: flex-start;
				}

				v-flex > *.align-center-lg-only,
				h-flex > *.align-center-lg-only {
					align-items: center;
				}

				v-flex > *.align-end-lg-only,
				h-flex > *.align-end-lg-only {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-lg-only,
				h-flex > *.align-stretch-lg-only {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-lg-only,
				h-flex > *.justify-start-lg-only {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-lg-only,
				h-flex > *.justify-center-lg-only {
					justify-content: center;
				}

				v-flex > *.justify-end-lg-only,
				h-flex > *.justify-end-lg-only {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-lg-only,
				h-flex > *.justify-space-between-lg-only {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-lg-only,
				h-flex > *.justify-space-around-lg-only {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-lg-only,
				h-flex > *.justify-space-evenly-lg-only {
					justify-content: space-evenly;
				}

		}

		/* Extra large and above (≥1200px) */
		@media (min-width: 1200px) {

			/* Flex . Auto sizing */

				v-flex.conform-viewport-xl {
					flex: 1 1 auto;
					height: 100vh;
				}

				h-flex.conform-viewport-xl {
					flex: 1 1 auto;
					width: 100vw;
				}

				v-flex.conform-parent-xl {
					flex: 1 1 auto;
					min-height: 0;
				}

				h-flex.conform-parent-xl {
					flex: 1 1 auto;
					width: 100%;
				}

				v-flex > *.expand-xl,
				h-flex > *.expand-xl {
					flex: 1 1 auto;
					min-width: 0;
				}

			/* Flex . Custom sizing */

				v-flex > *.h-half-xl,
				h-flex > *.w-half-xl {
					flex-basis: 50%;
				}

				v-flex > *.h-quarter-xl,
				h-flex > *.w-quarter-xl {
					flex-basis: 25%;
				}

				v-flex > *.h-third-xl,
				h-flex > *.w-third-xl {
					flex-basis: 33.33%;
				}

				v-flex > *.h-full-xl,
				h-flex > *.w-full-xl {
					flex-basis: 100%;
				}

			/* Flex . Options . Scroll */

				v-flex > *.scroll-xl {
					overflow-y: auto;
				}

				h-flex > *.scroll-xl {
					overflow-x: auto;
				}

			/* Flex . Options . Shrink */

				v-flex > *.shrink-xl,
				h-flex > *.shrink-xl {
					flex-shrink: 0;
				}

			/* Flex . Options . No Wrap */

				h-flex > *.no-wrap-xl {
					white-space: nowrap;
					overflow: hidden;
				}

			/* Flex . Options . Truncate */

				v-flex > *.truncate-xl,
				h-flex > *.truncate-xl {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* Flex . Options . Align */

				v-flex > *.align-start-xl,
				h-flex > *.align-start-xl {
					align-items: flex-start;
				}

				v-flex > *.align-center-xl,
				h-flex > *.align-center-xl {
					align-items: center;
				}

				v-flex > *.align-end-xl,
				h-flex > *.align-end-xl {
					align-items: flex-end;
				}

				v-flex > *.align-stretch-xl,
				h-flex > *.align-stretch-xl {
					align-items: stretch;
				}

			/* Flex . Options . Justify */

				v-flex > *.justify-start-xl,
				h-flex > *.justify-start-xl {
					justify-content: flex-start;
				}

				v-flex > *.justify-center-xl,
				h-flex > *.justify-center-xl {
					justify-content: center;
				}

				v-flex > *.justify-end-xl,
				h-flex > *.justify-end-xl {
					justify-content: flex-end;
				}

				v-flex > *.justify-space-between-xl,
				h-flex > *.justify-space-between-xl {
					justify-content: space-between;
				}

				v-flex > *.justify-space-around-xsl
				h-flex > *.justify-space-around-xl {
					justify-content: space-around;
				}

				v-flex > *.justify-space-evenly-xl,
				h-flex > *.justify-space-evenly-xl {
					justify-content: space-evenly;
				}

		}

/* Positioning */

		.v-full-viewport {
			height: 100vh;
		}

		.v-full {
			height: 100%;
		}