/***
 *	Width & Sizes
 *	2025-01-13
 */

/* Sizes */
.window-size { height: 100vh; width: 100vw; }

	.window-height,
	.window-h,
	.wh { height: 100vh; }

	.window-width,
	.window-w,
	.ww { width: 100vw; }


.full-size { display: block; width: 100%; height: 100%; }

	.full-height,
	.full-h,
	.full-height > img,
	.full-h > img { display: block; width: auto; height: 100%; }

	.full-width,
	.full-w,
	.full-width > img,
	.full-w > img { display: block; width: 100%; margin: 0; }

.wrap { width: 100%; max-width: calc( 1200px + ( var( --grid-gap ) * 2 ) ); margin-left: auto; margin-right: auto; padding-left: var( --grid-gap ); padding-right: var( --grid-gap ); }
	.wrap .wrap { padding-left: 0; padding-right: 0; }
	.wrap.m-fluid { max-width: 100%; }

/* Widths */
	.w-1of1 { width: calc( 100% - var( --grid-gap ) ); }

	.w-1of2,
	.w-2of4,
	.w-3of6,
	.w-4of8,
	.w-5of10,
	.w-6of12,
	.w-8of16,
	.w-half { width: calc( 50% - var( --grid-gap ) ) }

	.w-1of3,
	.w-2of6,
	.w-3of9,
	.w-4of12,
	.w-third { width: calc( 33.33% - var( --grid-gap ) ) }

	.w-2of3,
	.w-4of6,
	.w-6of9,
	.w-8of12 { width: calc( 66.66% - var( --grid-gap ) ) }

	.w-1of4,
	.w-2of8,
	.w-3of12,
	.w-4of16,
	.w-quarter { width: calc( 25% - var( --grid-gap ) ) }

	.w-3of4,
	.w-6of8,
	.w-9of12,
	.w-12of16 { width: calc( 75% - var( --grid-gap ) ) }

	.w-1of5,
	.w-2of10 { width: calc( 20% - var( --grid-gap ) ) }
	.w-2of5,
	.w-4of10 { width: calc( 40% - var( --grid-gap ) ) }
	.w-3of5,
	.w-6of10 { width: calc( 60% - var( --grid-gap ) ) }
	.w-4of5,
	.w-8of10 { width: calc( 80% - var( --grid-gap ) ) }

	.w-1of6,
	.w-2of12 { width: calc( 16.66% - var( --grid-gap ) ) }
	.w-5of6,
	.w-10of12 { width: calc( 83.33% - var( --grid-gap ) ) }

	.w-1of7 { width: calc( 14.28% - var( --grid-gap ) ) }
	.w-2of7 { width: calc( 28.57% - var( --grid-gap ) ) }
	.w-3of7 { width: calc( 42.85% - var( --grid-gap ) ) }
	.w-4of7 { width: calc( 57.14% - var( --grid-gap ) ) }
	.w-5of7 { width: calc( 71.42% - var( --grid-gap ) ) }
	.w-6of7 { width: calc( 85.71% - var( --grid-gap ) ) }

	.w-1of8,
	.w-2of16 { width: calc( 12.5% - var( --grid-gap ) ) }
	.w-3of8,
	.w-6of16 { width: calc( 37.5% - var( --grid-gap ) ) }
	.w-5of8,
	.w-10of16 { width: calc( 62.5% - var( --grid-gap ) ) }
	.w-7of8,
	.w-14of16 { width:calc( 87.5% - var( --grid-gap ) ) }

	.w-1of9 { width: calc( 11% - var( --grid-gap ) ) }
	.w-2of9 { width: calc( 22.22% - var( --grid-gap ) ) }
	.w-4of9 { width: calc( 44.44% - var( --grid-gap ) ) }
	.w-5of9 { width: calc( 55.55% - var( --grid-gap ) ) }
	.w-7of9 { width: calc( 77.77% - var( --grid-gap ) ) }
	.w-8of9 { width: calc( 88.88% - var( --grid-gap ) ) }

	.w-1of10 { width: calc( 10% - var( --grid-gap ) ) }
	.w-3of10 { width: calc( 30% - var( --grid-gap ) ) }
	.w-7of10 { width: calc( 70% - var( --grid-gap ) ) }
	.w-9of10 { width: calc( 90% - var( --grid-gap ) ) }

	.w-1of11 { width: calc( 9.09% - var( --grid-gap ) ) }
	.w-2of11 { width: calc( 18.18% - var( --grid-gap ) ) }
	.w-3of11 { width: calc( 27.27% - var( --grid-gap ) ) }
	.w-4of11 { width: calc( 36.36% - var( --grid-gap ) ) }
	.w-5of11 { width: calc( 45.45% - var( --grid-gap ) ) }
	.w-6of11 { width: calc( 54.54% - var( --grid-gap ) ) }
	.w-7of11 { width: calc( 63.63% - var( --grid-gap ) ) }
	.w-8of11 { width: calc( 72.72% - var( --grid-gap ) ) }
	.w-9of11 { width: calc( 81.81% - var( --grid-gap ) ) }
	.w-10of11 { width: calc( 90.9% - var( --grid-gap ) ) }

	.w-1of12 { width: calc( 8.33% - var( --grid-gap ) ) }
	.w-5of12 { width: calc( 41.66% - var( --grid-gap ) ) }
	.w-7of12 { width: calc( 58.33% - var( --grid-gap ) ) }
	.w-11of12 { width: calc( 91.66 - var( --grid-gap ) ) }

	.w-1of16 { width: calc( 6.25% - var( --grid-gap ) ) }
	.w-3of16 { width: calc( 18.75% - var( --grid-gap ) ) }
	.w-5of16 { width: calc( 31.25% - var( --grid-gap ) ) }
	.w-7of16 { width: calc( 43.75% - var( --grid-gap ) ) }
	.w-9of16 { width: calc( 56.25% - var( --grid-gap ) ) }
	.w-11of16 { width: calc( 68.75% - var( --grid-gap ) ) }
	.w-13of16 { width: calc( 81.25% - var( --grid-gap ) ) }
	.w-15of16 { width: calc( 93.75% - var( --grid-gap ) ) }

	.w-auto { width: auto }


/* -mb */
@media only screen and ( min-width: 360px ){

	.window-size-mb { height: 100vh; width: 100vw; }

		.window-height-mb,
		.window-h-mb,
		.wh-mb { height: 100vh; }

		.window-width-mb,
		.window-w-mb,
		.ww-mb { width: 100vw; }


	.full-size-mb { display: block; width: 100%; height: 100%; }

		.full-height-mb,
		.full-h-mb,
		.full-height-mb > img,
		.full-h-mb > img { display: block; width: auto; height: 100%; }

		.full-width-mb,
		.full-w-mb,
		.full-width-mb > img,
		.full-w-mb > img { display: block; width: 100%; margin: 0; }

	.w-1of1-mb { width: calc( 100% - var( --grid-gap ) ); }

	.w-1of2-mb,
	.w-2of4-mb,
	.w-3of6-mb,
	.w-4of8-mb,
	.w-5of10-mb,
	.w-6of12-mb,
	.w-8of16-mb,
	.w-half-mb { width: calc( 50% - var( --grid-gap ) ) }

	.w-1of3-mb,
	.w-2of6-mb,
	.w-3of9-mb,
	.w-4of12-mb,
	.w-third-mb { width: calc( 33.33% - var( --grid-gap ) ) }

	.w-2of3-mb,
	.w-4of6-mb,
	.w-6of9-mb,
	.w-8of12-mb { width: calc( 66.66% - var( --grid-gap ) ) }

	.w-1of4-mb,
	.w-2of8-mb,
	.w-3of12-mb,
	.w-4of16-mb,
	.w-quarter-mb { width: calc( 25% - var( --grid-gap ) ) }

	.w-3of4-mb,
	.w-6of8-mb,
	.w-9of12-mb,
	.w-12of16-mb { width: calc( 75% - var( --grid-gap ) ) }

	.w-1of5-mb,
	.w-2of10-mb { width: calc( 20% - var( --grid-gap ) ) }
	.w-2of5-mb,
	.w-4of10-mb { width: calc( 40% - var( --grid-gap ) ) }
	.w-3of5-mb,
	.w-6of10-mb { width: calc( 60% - var( --grid-gap ) ) }
	.w-4of5-mb,
	.w-8of10-mb { width: calc( 80% - var( --grid-gap ) ) }

	.w-1of6-mb,
	.w-2of12-mb { width: calc( 16.66% - var( --grid-gap ) ) }
	.w-5of6-mb,
	.w-10of12-mb { width: calc( 83.33% - var( --grid-gap ) ) }

	.w-1of7-mb { width: calc( 14.28% - var( --grid-gap ) ) }
	.w-2of7-mb { width: calc( 28.57% - var( --grid-gap ) ) }
	.w-3of7-mb { width: calc( 42.85% - var( --grid-gap ) ) }
	.w-4of7-mb { width: calc( 57.14% - var( --grid-gap ) ) }
	.w-5of7-mb { width: calc( 71.42% - var( --grid-gap ) ) }
	.w-6of7-mb { width: calc( 85.71% - var( --grid-gap ) ) }

	.w-1of8-mb,
	.w-2of16-mb { width: calc( 12.5% - var( --grid-gap ) ) }
	.w-3of8-mb,
	.w-6of16-mb { width: calc( 37.5% - var( --grid-gap ) ) }
	.w-5of8-mb,
	.w-10of16-mb { width: calc( 62.5% - var( --grid-gap ) ) }
	.w-7of8-mb,
	.w-14of16-mb { width:calc( 87.5% - var( --grid-gap ) ) }

	.w-1of9-mb { width: calc( 11% - var( --grid-gap ) ) }
	.w-2of9-mb { width: calc( 22.22% - var( --grid-gap ) ) }
	.w-4of9-mb { width: calc( 44.44% - var( --grid-gap ) ) }
	.w-5of9-mb { width: calc( 55.55% - var( --grid-gap ) ) }
	.w-7of9-mb { width: calc( 77.77% - var( --grid-gap ) ) }
	.w-8of9-mb { width: calc( 88.88% - var( --grid-gap ) ) }

	.w-1of10-mb { width: calc( 10% - var( --grid-gap ) ) }
	.w-3of10-mb { width: calc( 30% - var( --grid-gap ) ) }
	.w-7of10-mb { width: calc( 70% - var( --grid-gap ) ) }
	.w-9of10-mb { width: calc( 90% - var( --grid-gap ) ) }

	.w-1of11-mb { width: calc( 9.09% - var( --grid-gap ) ) }
	.w-2of11-mb { width: calc( 18.18% - var( --grid-gap ) ) }
	.w-3of11-mb { width: calc( 27.27% - var( --grid-gap ) ) }
	.w-4of11-mb { width: calc( 36.36% - var( --grid-gap ) ) }
	.w-5of11-mb { width: calc( 45.45% - var( --grid-gap ) ) }
	.w-6of11-mb { width: calc( 54.54% - var( --grid-gap ) ) }
	.w-7of11-mb { width: calc( 63.63% - var( --grid-gap ) ) }
	.w-8of11-mb { width: calc( 72.72% - var( --grid-gap ) ) }
	.w-9of11-mb { width: calc( 81.81% - var( --grid-gap ) ) }
	.w-10of11-mb { width: calc( 90.9% - var( --grid-gap ) ) }

	.w-1of12-mb { width: calc( 8.33% - var( --grid-gap ) ) }
	.w-5of12-mb { width: calc( 41.66% - var( --grid-gap ) ) }
	.w-7of12-mb { width: calc( 58.33% - var( --grid-gap ) ) }
	.w-11of12-mb { width: calc( 91.66 - var( --grid-gap ) ) }

	.w-1of16-mb { width: calc( 6.25% - var( --grid-gap ) ) }
	.w-3of16-mb { width: calc( 18.75% - var( --grid-gap ) ) }
	.w-5of16-mb { width: calc( 31.25% - var( --grid-gap ) ) }
	.w-7of16-mb { width: calc( 43.75% - var( --grid-gap ) ) }
	.w-9of16-mb { width: calc( 56.25% - var( --grid-gap ) ) }
	.w-11of16-mb { width: calc( 68.75% - var( --grid-gap ) ) }
	.w-13of16-mb { width: calc( 81.25% - var( --grid-gap ) ) }
	.w-15of16-mb { width: calc( 93.75% - var( --grid-gap ) ) }

	.w-auto-mb { width: auto }
}

/* -tb */
@media only screen and ( min-width: 600px ){

	.window-size-tb { height: 100vh; width: 100vw; }

		.window-height-tb,
		.window-h-tb,
		.wh-tb { height: 100vh; }

		.window-width-tb,
		.window-w-tb,
		.ww-tb { width: 100vw; }


	.full-size-tb { display: block; width: 100%; height: 100%; }

		.full-height-tb,
		.full-h-tb,
		.full-height-tb > img,
		.full-h-tb > img { display: block; width: auto; height: 100%; }

		.full-width-tb,
		.full-w-tb,
		.full-width-tb > img,
		.full-w-tb > img { display: block; width: 100%; margin: 0; }

	.w-1of1-tb { width: calc( 100% - var( --grid-gap ) ); }

	.w-1of2-tb,
	.w-2of4-tb,
	.w-3of6-tb,
	.w-4of8-tb,
	.w-5of10-tb,
	.w-6of12-tb,
	.w-8of16-tb,
	.w-half-tb { width: calc( 50% - var( --grid-gap ) ) }

	.w-1of3-tb,
	.w-2of6-tb,
	.w-3of9-tb,
	.w-4of12-tb,
	.w-third-tb { width: calc( 33.33% - var( --grid-gap ) ) }

	.w-2of3-tb,
	.w-4of6-tb,
	.w-6of9-tb,
	.w-8of12-tb { width: calc( 66.66% - var( --grid-gap ) ) }

	.w-1of4-tb,
	.w-2of8-tb,
	.w-3of12-tb,
	.w-4of16-tb,
	.w-quarter-tb { width: calc( 25% - var( --grid-gap ) ) }

	.w-3of4-tb,
	.w-6of8-tb,
	.w-9of12-tb,
	.w-12of16-tb { width: calc( 75% - var( --grid-gap ) ) }

	.w-1of5-tb,
	.w-2of10-tb { width: calc( 20% - var( --grid-gap ) ) }
	.w-2of5-tb,
	.w-4of10-tb { width: calc( 40% - var( --grid-gap ) ) }
	.w-3of5-tb,
	.w-6of10-tb { width: calc( 60% - var( --grid-gap ) ) }
	.w-4of5-tb,
	.w-8of10-tb { width: calc( 80% - var( --grid-gap ) ) }

	.w-1of6-tb,
	.w-2of12-tb { width: calc( 16.66% - var( --grid-gap ) ) }
	.w-5of6-tb,
	.w-10of12-tb { width: calc( 83.33% - var( --grid-gap ) ) }

	.w-1of7-tb { width: calc( 14.28% - var( --grid-gap ) ) }
	.w-2of7-tb { width: calc( 28.57% - var( --grid-gap ) ) }
	.w-3of7-tb { width: calc( 42.85% - var( --grid-gap ) ) }
	.w-4of7-tb { width: calc( 57.14% - var( --grid-gap ) ) }
	.w-5of7-tb { width: calc( 71.42% - var( --grid-gap ) ) }
	.w-6of7-tb { width: calc( 85.71% - var( --grid-gap ) ) }

	.w-1of8-tb,
	.w-2of16-tb { width: calc( 12.5% - var( --grid-gap ) ) }
	.w-3of8-tb,
	.w-6of16-tb { width: calc( 37.5% - var( --grid-gap ) ) }
	.w-5of8-tb,
	.w-10of16-tb { width: calc( 62.5% - var( --grid-gap ) ) }
	.w-7of8-tb,
	.w-14of16-tb { width:calc( 87.5% - var( --grid-gap ) ) }

	.w-1of9-tb { width: calc( 11% - var( --grid-gap ) ) }
	.w-2of9-tb { width: calc( 22.22% - var( --grid-gap ) ) }
	.w-4of9-tb { width: calc( 44.44% - var( --grid-gap ) ) }
	.w-5of9-tb { width: calc( 55.55% - var( --grid-gap ) ) }
	.w-7of9-tb { width: calc( 77.77% - var( --grid-gap ) ) }
	.w-8of9-tb { width: calc( 88.88% - var( --grid-gap ) ) }

	.w-1of10-tb { width: calc( 10% - var( --grid-gap ) ) }
	.w-3of10-tb { width: calc( 30% - var( --grid-gap ) ) }
	.w-7of10-tb { width: calc( 70% - var( --grid-gap ) ) }
	.w-9of10-tb { width: calc( 90% - var( --grid-gap ) ) }

	.w-1of11-tb { width: calc( 9.09% - var( --grid-gap ) ) }
	.w-2of11-tb { width: calc( 18.18% - var( --grid-gap ) ) }
	.w-3of11-tb { width: calc( 27.27% - var( --grid-gap ) ) }
	.w-4of11-tb { width: calc( 36.36% - var( --grid-gap ) ) }
	.w-5of11-tb { width: calc( 45.45% - var( --grid-gap ) ) }
	.w-6of11-tb { width: calc( 54.54% - var( --grid-gap ) ) }
	.w-7of11-tb { width: calc( 63.63% - var( --grid-gap ) ) }
	.w-8of11-tb { width: calc( 72.72% - var( --grid-gap ) ) }
	.w-9of11-tb { width: calc( 81.81% - var( --grid-gap ) ) }
	.w-10of11-tb { width: calc( 90.9% - var( --grid-gap ) ) }

	.w-1of12-tb { width: calc( 8.33% - var( --grid-gap ) ) }
	.w-5of12-tb { width: calc( 41.66% - var( --grid-gap ) ) }
	.w-7of12-tb { width: calc( 58.33% - var( --grid-gap ) ) }
	.w-11of12-tb { width: calc( 91.66 - var( --grid-gap ) ) }

	.w-1of16-tb { width: calc( 6.25% - var( --grid-gap ) ) }
	.w-3of16-tb { width: calc( 18.75% - var( --grid-gap ) ) }
	.w-5of16-tb { width: calc( 31.25% - var( --grid-gap ) ) }
	.w-7of16-tb { width: calc( 43.75% - var( --grid-gap ) ) }
	.w-9of16-tb { width: calc( 56.25% - var( --grid-gap ) ) }
	.w-11of16-tb { width: calc( 68.75% - var( --grid-gap ) ) }
	.w-13of16-tb { width: calc( 81.25% - var( --grid-gap ) ) }
	.w-15of16-tb { width: calc( 93.75% - var( --grid-gap ) ) }

	.w-auto-tb { width: auto }
}

/* -dt */
@media only screen and ( min-width: 900px ){

	.window-size-dt { height: 100vh; width: 100vw; }

		.window-height-dt,
		.window-h-dt,
		.wh-dt { height: 100vh; }

		.window-width-dt,
		.window-w-dt,
		.ww-dt { width: 100vw; }


	.full-size-dt { display: block; width: 100%; height: 100%; }

		.full-height-dt,
		.full-h-dt,
		.full-height-dt > img,
		.full-h-dt > img { display: block; width: auto; height: 100%; }

		.full-width-dt,
		.full-w-dt,
		.full-width-dt > img,
		.full-w-dt > img { display: block; width: 100%; margin: 0; }


	.w-1of1-dt { width: calc( 100% - var( --grid-gap ) ); }

	.w-1of2-dt,
	.w-2of4-dt,
	.w-3of6-dt,
	.w-4of8-dt,
	.w-5of10-dt,
	.w-6of12-dt,
	.w-8of16-dt,
	.w-half-dt { width: calc( 50% - var( --grid-gap ) ) }

	.w-1of3-dt,
	.w-2of6-dt,
	.w-3of9-dt,
	.w-4of12-dt,
	.w-third-dt { width: calc( 33.33% - var( --grid-gap ) ) }

	.w-2of3-dt,
	.w-4of6-dt,
	.w-6of9-dt,
	.w-8of12-dt { width: calc( 66.66% - var( --grid-gap ) ) }

	.w-1of4-dt,
	.w-2of8-dt,
	.w-3of12-dt,
	.w-4of16-dt,
	.w-quarter-dt { width: calc( 25% - var( --grid-gap ) ) }

	.w-3of4-dt,
	.w-6of8-dt,
	.w-9of12-dt,
	.w-12of16-dt { width: calc( 75% - var( --grid-gap ) ) }

	.w-1of5-dt,
	.w-2of10-dt { width: calc( 20% - var( --grid-gap ) ) }
	.w-2of5-dt,
	.w-4of10-dt { width: calc( 40% - var( --grid-gap ) ) }
	.w-3of5-dt,
	.w-6of10-dt { width: calc( 60% - var( --grid-gap ) ) }
	.w-4of5-dt,
	.w-8of10-dt { width: calc( 80% - var( --grid-gap ) ) }

	.w-1of6-dt,
	.w-2of12-dt { width: calc( 16.66% - var( --grid-gap ) ) }
	.w-5of6-dt,
	.w-10of12-dt { width: calc( 83.33% - var( --grid-gap ) ) }

	.w-1of7-dt { width: calc( 14.28% - var( --grid-gap ) ) }
	.w-2of7-dt { width: calc( 28.57% - var( --grid-gap ) ) }
	.w-3of7-dt { width: calc( 42.85% - var( --grid-gap ) ) }
	.w-4of7-dt { width: calc( 57.14% - var( --grid-gap ) ) }
	.w-5of7-dt { width: calc( 71.42% - var( --grid-gap ) ) }
	.w-6of7-dt { width: calc( 85.71% - var( --grid-gap ) ) }

	.w-1of8-dt,
	.w-2of16-dt { width: calc( 12.5% - var( --grid-gap ) ) }
	.w-3of8-dt,
	.w-6of16-dt { width: calc( 37.5% - var( --grid-gap ) ) }
	.w-5of8-dt,
	.w-10of16-dt { width: calc( 62.5% - var( --grid-gap ) ) }
	.w-7of8-dt,
	.w-14of16-dt { width:calc( 87.5% - var( --grid-gap ) ) }

	.w-1of9-dt { width: calc( 11% - var( --grid-gap ) ) }
	.w-2of9-dt { width: calc( 22.22% - var( --grid-gap ) ) }
	.w-4of9-dt { width: calc( 44.44% - var( --grid-gap ) ) }
	.w-5of9-dt { width: calc( 55.55% - var( --grid-gap ) ) }
	.w-7of9-dt { width: calc( 77.77% - var( --grid-gap ) ) }
	.w-8of9-dt { width: calc( 88.88% - var( --grid-gap ) ) }

	.w-1of10-dt { width: calc( 10% - var( --grid-gap ) ) }
	.w-3of10-dt { width: calc( 30% - var( --grid-gap ) ) }
	.w-7of10-dt { width: calc( 70% - var( --grid-gap ) ) }
	.w-9of10-dt { width: calc( 90% - var( --grid-gap ) ) }

	.w-1of11-dt { width: calc( 9.09% - var( --grid-gap ) ) }
	.w-2of11-dt { width: calc( 18.18% - var( --grid-gap ) ) }
	.w-3of11-dt { width: calc( 27.27% - var( --grid-gap ) ) }
	.w-4of11-dt { width: calc( 36.36% - var( --grid-gap ) ) }
	.w-5of11-dt { width: calc( 45.45% - var( --grid-gap ) ) }
	.w-6of11-dt { width: calc( 54.54% - var( --grid-gap ) ) }
	.w-7of11-dt { width: calc( 63.63% - var( --grid-gap ) ) }
	.w-8of11-dt { width: calc( 72.72% - var( --grid-gap ) ) }
	.w-9of11-dt { width: calc( 81.81% - var( --grid-gap ) ) }
	.w-10of11-dt { width: calc( 90.9% - var( --grid-gap ) ) }

	.w-1of12-dt { width: calc( 8.33% - var( --grid-gap ) ) }
	.w-5of12-dt { width: calc( 41.66% - var( --grid-gap ) ) }
	.w-7of12-dt { width: calc( 58.33% - var( --grid-gap ) ) }
	.w-11of12-dt { width: calc( 91.66 - var( --grid-gap ) ) }

	.w-1of16-dt { width: calc( 6.25% - var( --grid-gap ) ) }
	.w-3of16-dt { width: calc( 18.75% - var( --grid-gap ) ) }
	.w-5of16-dt { width: calc( 31.25% - var( --grid-gap ) ) }
	.w-7of16-dt { width: calc( 43.75% - var( --grid-gap ) ) }
	.w-9of16-dt { width: calc( 56.25% - var( --grid-gap ) ) }
	.w-11of16-dt { width: calc( 68.75% - var( --grid-gap ) ) }
	.w-13of16-dt { width: calc( 81.25% - var( --grid-gap ) ) }
	.w-15of16-dt { width: calc( 93.75% - var( --grid-gap ) ) }

	.w-auto-dt { width: auto }
}

/* -xx */
@media only screen and ( min-width: 1440px ){

	.window-size-xx { height: 100vh; width: 100vw; }

		.window-height-xx,
		.window-h-xx,
		.wh-xx { height: 100vh; }

		.window-width-xx,
		.window-w-xx,
		.ww-xx { width: 100vw; }


	.full-size-xx { display: block; width: 100%; height: 100%; }

		.full-height-xx,
		.full-h-xx,
		.full-height-xx > img,
		.full-h-xx > img { display: block; width: auto; height: 100%; }

		.full-width-xx,
		.full-w-xx,
		.full-width-xx > img,
		.full-w-xx > img { display: block; width: 100%; margin: 0; }

	.w-1of1-xx { width: calc( 100% - var( --grid-gap ) ); }

	.w-1of2-xx,
	.w-2of4-xx,
	.w-3of6-xx,
	.w-4of8-xx,
	.w-5of10-xx,
	.w-6of12-xx,
	.w-8of16-xx,
	.w-half-xx { width: calc( 50% - var( --grid-gap ) ) }

	.w-1of3-xx,
	.w-2of6-xx,
	.w-3of9-xx,
	.w-4of12-xx,
	.w-third-xx { width: calc( 33.33% - var( --grid-gap ) ) }

	.w-2of3-xx,
	.w-4of6-xx,
	.w-6of9-xx,
	.w-8of12-xx { width: calc( 66.66% - var( --grid-gap ) ) }

	.w-1of4-xx,
	.w-2of8-xx,
	.w-3of12-xx,
	.w-4of16-xx,
	.w-quarter-xx { width: calc( 25% - var( --grid-gap ) ) }

	.w-3of4-xx,
	.w-6of8-xx,
	.w-9of12-xx,
	.w-12of16-xx { width: calc( 75% - var( --grid-gap ) ) }

	.w-1of5-xx,
	.w-2of10-xx { width: calc( 20% - var( --grid-gap ) ) }
	.w-2of5-xx,
	.w-4of10-xx { width: calc( 40% - var( --grid-gap ) ) }
	.w-3of5-xx,
	.w-6of10-xx { width: calc( 60% - var( --grid-gap ) ) }
	.w-4of5-xx,
	.w-8of10-xx { width: calc( 80% - var( --grid-gap ) ) }

	.w-1of6-xx,
	.w-2of12-xx { width: calc( 16.66% - var( --grid-gap ) ) }
	.w-5of6-xx,
	.w-10of12-xx { width: calc( 83.33% - var( --grid-gap ) ) }

	.w-1of7-xx { width: calc( 14.28% - var( --grid-gap ) ) }
	.w-2of7-xx { width: calc( 28.57% - var( --grid-gap ) ) }
	.w-3of7-xx { width: calc( 42.85% - var( --grid-gap ) ) }
	.w-4of7-xx { width: calc( 57.14% - var( --grid-gap ) ) }
	.w-5of7-xx { width: calc( 71.42% - var( --grid-gap ) ) }
	.w-6of7-xx { width: calc( 85.71% - var( --grid-gap ) ) }

	.w-1of8-xx,
	.w-2of16-xx { width: calc( 12.5% - var( --grid-gap ) ) }
	.w-3of8-xx,
	.w-6of16-xx { width: calc( 37.5% - var( --grid-gap ) ) }
	.w-5of8-xx,
	.w-10of16-xx { width: calc( 62.5% - var( --grid-gap ) ) }
	.w-7of8-xx,
	.w-14of16-xx { width:calc( 87.5% - var( --grid-gap ) ) }

	.w-1of9-xx { width: calc( 11% - var( --grid-gap ) ) }
	.w-2of9-xx { width: calc( 22.22% - var( --grid-gap ) ) }
	.w-4of9-xx { width: calc( 44.44% - var( --grid-gap ) ) }
	.w-5of9-xx { width: calc( 55.55% - var( --grid-gap ) ) }
	.w-7of9-xx { width: calc( 77.77% - var( --grid-gap ) ) }
	.w-8of9-xx { width: calc( 88.88% - var( --grid-gap ) ) }

	.w-1of10-xx { width: calc( 10% - var( --grid-gap ) ) }
	.w-3of10-xx { width: calc( 30% - var( --grid-gap ) ) }
	.w-7of10-xx { width: calc( 70% - var( --grid-gap ) ) }
	.w-9of10-xx { width: calc( 90% - var( --grid-gap ) ) }

	.w-1of11-xx { width: calc( 9.09% - var( --grid-gap ) ) }
	.w-2of11-xx { width: calc( 18.18% - var( --grid-gap ) ) }
	.w-3of11-xx { width: calc( 27.27% - var( --grid-gap ) ) }
	.w-4of11-xx { width: calc( 36.36% - var( --grid-gap ) ) }
	.w-5of11-xx { width: calc( 45.45% - var( --grid-gap ) ) }
	.w-6of11-xx { width: calc( 54.54% - var( --grid-gap ) ) }
	.w-7of11-xx { width: calc( 63.63% - var( --grid-gap ) ) }
	.w-8of11-xx { width: calc( 72.72% - var( --grid-gap ) ) }
	.w-9of11-xx { width: calc( 81.81% - var( --grid-gap ) ) }
	.w-10of11-xx { width: calc( 90.9% - var( --grid-gap ) ) }

	.w-1of12-xx { width: calc( 8.33% - var( --grid-gap ) ) }
	.w-5of12-xx { width: calc( 41.66% - var( --grid-gap ) ) }
	.w-7of12-xx { width: calc( 58.33% - var( --grid-gap ) ) }
	.w-11of12-xx { width: calc( 91.66 - var( --grid-gap ) ) }

	.w-1of16-xx { width: calc( 6.25% - var( --grid-gap ) ) }
	.w-3of16-xx { width: calc( 18.75% - var( --grid-gap ) ) }
	.w-5of16-xx { width: calc( 31.25% - var( --grid-gap ) ) }
	.w-7of16-xx { width: calc( 43.75% - var( --grid-gap ) ) }
	.w-9of16-xx { width: calc( 56.25% - var( --grid-gap ) ) }
	.w-11of16-xx { width: calc( 68.75% - var( --grid-gap ) ) }
	.w-13of16-xx { width: calc( 81.25% - var( --grid-gap ) ) }
	.w-15of16-xx { width: calc( 93.75% - var( --grid-gap ) ) }

	.w-auto-xx { width: auto }
}