/********************************/
/* LAYOUT
/********************************/


/* Static containers */
.narrowest-container,
.narrower-container,
.narrow-container,
.container,
.medium-container, 
.default-container,
.wide-container,
.wider-container,
.widest-container,
.fluid-container,
.fullwidth-container 	{ 
	width: 100%; 
	margin: 0 auto; 
	padding-inline: var(--gap); 
}
.narrowest-container 	{ max-width: 576px; }
.narrower-container 	{ max-width: 960px; } 
.narrow-container		{ max-width: 1024px; } 
.container,
.medium-container, 
.default-container		{ max-width: 1152px; }
.wide-container			{ max-width: 1320px; } 
.wider-container		{ max-width: 1512px; } 
.widest-container 		{ max-width: 1848px; }
.fullwidth-container	{ }
/***/


/* Text based containers */
.narrowest-text-container,
.narrower-text-container,
.narrow-text-container,
.text-container,
.default-text-container,
.medium-text-container,
.wide-text-container,
.wider-text-container,
.widest-text-container 		{ 
	width: 100%; 
	margin-inline: auto; 
	padding-inline: 1rem; 
}
.narrowest-text-container	{ max-width: 26em; }
.narrower-text-container 	{ max-width: 32em; }
.narrow-text-container 		{ max-width: 36em; }
.text-container,
.default-text-container,
.medium-text-container	 	{ max-width: 72em; }
.wide-text-container 		{ max-width: 48em; }
.wider-text-container 		{ max-width: 48em; }
.widest-text-container 		{ max-width: 48em; }
/***/


/* Flex containers */
.flex-container {
	display: flex;
}
.flex-column 		{ flex-direction: column; }
.flex-row 			{ flex-direction: row; }
.flex-row-reverse	{ flex-direction: row-reverse; }

.flex-5vh 	{ min-height:  5vh; }
.flex-10vh 	{ min-height: 10vh; }
.flex-15vh 	{ min-height: 15vh; }
.flex-20vh 	{ min-height: 20vh; }
.flex-25vh 	{ min-height: 25vh; }
.flex-30vh 	{ min-height: 30vh; }
.flex-35vh 	{ min-height: 35vh; }
.flex-40vh 	{ min-height: 40vh; }
.flex-45vh 	{ min-height: 45vh; }
.flex-50vh 	{ min-height: 50vh; }
.flex-55vh 	{ min-height: 55vh; }
.flex-60vh 	{ min-height: 60vh; }
.flex-65vh 	{ min-height: 65vh; }
.flex-70vh 	{ min-height: 70vh; }
.flex-75vh 	{ min-height: 75vh; }
.flex-80vh 	{ min-height: 80vh; }
.flex-85vh 	{ min-height: 85vh; }
.flex-90vh 	{ min-height: 90vh; }
.flex-95vh 	{ min-height: 95vh; }
.flex-100vh { min-height: 100vh; }

.flex-top			{ justify-content: flex-start; }
.flex-center		{ justify-content: center; }
.flex-bottom		{ justify-content: flex-end; }
.flex-space-between	{ justify-content: space-between; }
.flex-space-around	{ justify-content: space-around; }
.flex-space-evenly	{ justify-content: space-evenly; }

.flex-align-start 	{ align-items: flex-start; }
.flex-align-center 	{ align-items: center; }
.flex-align-end 	{ align-items: flex-end; }
.flex-align-stretch	{ align-items: stretch; }
/***/


/* Heights */
/***/


/* Vertical margins and paddings */
.no-margin        	{ margin-block:  0; }
.px-margin 			{ margin-block:  1px; }
.smallest-margin 	{ margin-block:  5px; }
.smaller-margin 	{ margin-block: 10px; }
.small-margin 		{ margin-block: 15px; }
.medium-margin		{ margin-block: 30px; }
.big-margin 		{ margin-block: 45px; }
.bigger-margin 		{ margin-block: 60px; }
.biggest-margin 	{ margin-block: 90px; }

.no-padding 		{ padding-block:  0; }
.px-padding 		{ padding-block:  1px; }
.smallest-padding 	{ padding-block:  5px; }
.smaller-padding 	{ padding-block: 10px; }
.small-padding 		{ padding-block: 15px; }
.medium-padding		{ padding-block: 30px; }
.big-padding 		{ padding-block: 45px; }
.bigger-padding 	{ padding-block: 60px; }
.biggest-padding 	{ padding-block: 90px; }
/***/


/* Side margins and padding */
.no-side-margin 	{ margin-inline: 0; }
.px-side-margin 	{ margin-inline: 1px; }
.thinnest-margin 	{ margin-inline: 0.25rem; }
.thinner-margin 	{ margin-inline: 0.50rem; }
.thin-margin 		{ margin-inline: 0.75rem; }
.default-margin 	{ margin-inline: 1.00rem; }
.thick-margin 		{ margin-inline: 1.25rem; }
.thicker-margin 	{ margin-inline: 1.50rem; }
.thickest-margin 	{ margin-inline: 2.00rem; }

.no-side-padding 	{ padding-inline: 0; }
.px-side-padding 	{ padding-inline: 1px;	}
.thinnest-padding 	{ padding-inline: 0.25rem; }
.thinner-padding 	{ padding-inline: 0.50rem; }
.thin-padding 		{ padding-inline: 0.75rem; }
.default-padding 	{ padding-inline: 1.00rem; }
.thick-padding 		{ padding-inline: 1.25rem; }
.thicker-padding 	{ padding-inline: 1.50rem; }
.thickest-padding 	{ padding-inline: 2.00rem; }

@media (min-width: 1200px) {
	.fluid-side-padding { padding-inline: min(3.3333%, 4rem); }
}
/***/


/* Rows and columns */
.row 				{ --gap: 16px; }
.row.no-gap			{ --gap:  0; }
.row.px-gap 		{ --gap:  1px; }
.row.thinnest-gap 	{ --gap:  4px; }
.row.thinner-gap 	{ --gap:  8px; }
.row.thin-gap 		{ --gap: 12px; }
.row.thick-gap 		{ --gap: 20px; }
.row.thicker-gap 	{ --gap: 24px; }
.row.thickest-gap 	{ --gap: 32px; }

.row {
    display: flex;
    flex-wrap: wrap;
	margin-inline: calc(-1 * var(--gap));
}

.col {
	width: 100%;
	/*flex: 1 0 auto;*/
	min-height: 1px;
	padding: calc(0.5 * var(--gap)) var(--gap);
}
							  .col-1     { width:  8.33%; } .col-2     { width: 16.66%; } .col-3     { width: 25.00%; } .col-4     { width: 33.33%; } .col-5     { width: 41.66%; } .col-6     { width: 50.00%; } .col-7     { width: 58.33%; } .col-8     { width: 66.66%; } .col-9     { width: 75.00%; } .col-10     { width: 83.33%; } .col-11     { width: 91.66%; } .col-12     { width: 100%; }
@media (min-width : 576px)  { .col-sm-1  { width:  8.33%; } .col-sm-2  { width: 16.66%; } .col-sm-3  { width: 25.00%; }	.col-sm-4  { width: 33.33%; } .col-sm-5  { width: 41.66%; } .col-sm-6  { width: 50.00%; } .col-sm-7  { width: 58.33%; } .col-sm-8  { width: 66.66%; } .col-sm-9  { width: 75.00%; } .col-sm-10  { width: 83.33%; } .col-sm-11  { width: 91.66%; } .col-sm-12  { width: 100%; } }
@media (min-width : 768px)  { .col-md-1  { width:  8.33%; } .col-md-2  { width: 16.66%; } .col-md-3  { width: 25.00%; }	.col-md-4  { width: 33.33%; } .col-md-5  { width: 41.66%; } .col-md-6  { width: 50.00%; } .col-md-7  { width: 58.33%; } .col-md-8  { width: 66.66%; } .col-md-9  { width: 75.00%; } .col-md-10  { width: 83.33%; } .col-md-11  { width: 91.66%; } .col-md-12  { width: 100%; } }
@media (min-width : 992px)  { .col-lg-1  { width:  8.33%; } .col-lg-2  { width: 16.66%; } .col-lg-3  { width: 25.00%; }	.col-lg-4  { width: 33.33%; } .col-lg-5  { width: 41.66%; } .col-lg-6  { width: 50.00%; } .col-lg-7  { width: 58.33%; } .col-lg-8  { width: 66.66%; } .col-lg-9  { width: 75.00%; } .col-lg-10  { width: 83.33%; } .col-lg-11  { width: 91.66%; } .col-lg-12  { width: 100%; } }
@media (min-width : 1200px) { .col-xl-1  { width:  8.33%; } .col-xl-2  { width: 16.66%; } .col-xl-3  { width: 25.00%; }	.col-xl-4  { width: 33.33%; } .col-xl-5  { width: 41.66%; } .col-xl-6  { width: 50.00%; } .col-xl-7  { width: 58.33%; } .col-xl-8  { width: 66.66%; } .col-xl-9  { width: 75.00%; } .col-xl-10  { width: 83.33%; } .col-xl-11  { width: 91.66%; } .col-xl-12  { width: 100%; } }
@media (min-width : 1600px) { .col-xxl-1 { width:  8.33%; }	.col-xxl-2 { width: 16.66%; } .col-xxl-3 { width: 25.00%; }	.col-xxl-4 { width: 33.33%; } .col-xxl-5 { width: 41.66%; } .col-xxl-6 { width: 50.00%; } .col-xxl-7 { width: 58.33%; } .col-xxl-8 { width: 66.66%; } .col-xxl-9 { width: 75.00%; } .col-xxl-10 { width: 83.33%; } .col-xxl-11 { width: 91.66%; } .col-xxl-12 { width: 100%; } }
/***/



/* Vertical spacers */
.px-spacer			{ height:  1px; }
.smallest-spacer	{ height:  8px; }
.smaller-spacer 	{ height: 16px; }
.small-spacer 		{ height: 24px; }
.medium-spacer,
.default-spacer 	{ height: 32px; }
.big-spacer 		{ height: 48px; }
.bigger-spacer 		{ height: 64px; }
.biggest-spacer 	{ height: 96px; }

.smallest-em-spacer	{ height: 0.25em; }
.smaller-em-spacer 	{ height: 0.50em; }
.small-em-spacer 	{ height: 0.75em; }
.em-spacer,
.medium-em-spacer,
.default-em-spacer 	{ height: 1.0em; }
.big-em-spacer 		{ height: 1.5em; }
.bigger-em-spacer 	{ height: 2.0em; }
.biggest-em-spacer 	{ height: 3.0em; }
/***/



/* Vertical separators */
.px-separator			{ margin-block:  1px; }
.smallest-separator		{ margin-block:  8px; }
.smaller-separator 		{ margin-block: 16px; }
.small-separator		{ margin-block: 24px; }
.separator, 
.medium-separator, 
.default-separator 		{ margin-block: 32px; }
.big-separator 			{ margin-block: 48px; }
.bigger-separator 		{ margin-block: 64px; }
.biggest-separator 		{ margin-block: 96px; }

.smallest-em-separator	{ margin-block: 0.25em; }
.smaller-em-separator 	{ margin-block: 0.50em; }
.small-em-separator	 	{ margin-block: 0.75em; }
.em-separator, 
.medium-em-separator,
.default-em-separator 	{ margin-block: 1.0em; }
.big-em-separator 		{ margin-block: 1.5em; }
.bigger-em-separator 	{ margin-block: 2.0em; }
.biggest-em-separator 	{ margin-block: 3.0em; }


.line-separator			{ border: 1px solid; }

.stripe-separator		{ display: inline-block; vertical-align: top; width: 12.8rem; max-width: 100%; height: 0; border: 2px solid; }

.icon-separator			{ }

.deco-separator			{ }

.dots-separator 		{ white-space: nowrap; }
.dots-separator > span 	{ display: inline-block; vertical-align: middle; margin-inline: 0.3333em; border: 0.25em solid; border-radius: 0.25em; }
/***/



/* Grid */
.grid {
	--gap: 4px;
	
	display: grid;
	grid-gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax( calc(6.25% - var(--gap)), 1fr));
}
.grid-item {
}

.row-span-1 	{ grid-row: span 1; }
.row-span-2 	{ grid-row: span 2; }
.row-span-3 	{ grid-row: span 3; }
.row-span-4 	{ grid-row: span 4; }
.row-span-5 	{ grid-row: span 5; }
.row-span-6 	{ grid-row: span 6; }
.row-span-7 	{ grid-row: span 7; }
.row-span-8 	{ grid-row: span 8; }
.row-span-9 	{ grid-row: span 9; }
.row-span-10 	{ grid-row: span 10; }
.row-span-11 	{ grid-row: span 11; }
.row-span-12 	{ grid-row: span 12; }
.row-span-13 	{ grid-row: span 13; }
.row-span-14 	{ grid-row: span 14; }
.row-span-15 	{ grid-row: span 15; }
.row-span-16 	{ grid-row: span 16; }


.col-span-1 	{ grid-column: span 1; }
.col-span-2 	{ grid-column: span 2; }
.col-span-3 	{ grid-column: span 3; }
.col-span-4 	{ grid-column: span 4; }
.col-span-5 	{ grid-column: span 5; }
.col-span-6 	{ grid-column: span 6; }
.col-span-7 	{ grid-column: span 7; }
.col-span-8 	{ grid-column: span 8; }
.col-span-9 	{ grid-column: span 9; }
.col-span-10 	{ grid-column: span 10; }
.col-span-11 	{ grid-column: span 11; }
.col-span-12 	{ grid-column: span 12; }
.col-span-13 	{ grid-column: span 13; }
.col-span-14 	{ grid-column: span 14; }
.col-span-15 	{ grid-column: span 15; }
.col-span-16 	{ grid-column: span 16; }

/***/