@enigmatry/scss-foundation 17.0.0-preview.4 → 17.0.0-preview.5.1

package/tests/layout/grid.tests.scss

@@ -1,1155 +1,1155 @@
-/* stylelint-disable pitcher/max-lines */
-/* stylelint-disable csstools/use-nesting */
-/* stylelint-disable selector-max-attribute */
-/* stylelint-disable shorthand-property-no-redundant-values */
-/* stylelint-disable number-max-precision */
-/* stylelint-disable max-nesting-depth */
-/* stylelint-disable at-rule-allowed-list */
-@use '../../src/modules/layout/grid';
-@use '../../src/modules/variables' as vars;
-@use 'sass-true';
-
-vars.$testing: true;
-
-@include sass-true.describe('generate($spacing, $divisions)') {
-	@include sass-true.it('should throw if spacing is not a number') {
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(null);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide number parameter! Given value:  */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate('abcd1234');
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide number parameter! Given value: abcd1234 */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(#FFEEAA);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide number parameter! Given value: #FFEEAA */
-			}
-		}
-	}
-
-	@include sass-true.it('should throw if $division is not a number or outside of bounds') {
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(4em, 'abba');
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide positive number for divisions, between 2 and 1000! Given value: abba */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(4em, null);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide positive number for divisions, between 2 and 1000! Given value:  */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(4em, #FFEEAA);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide positive number for divisions, between 2 and 1000! Given value: #FFEEAA */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(4em, -15);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide positive number for divisions, between 2 and 1000! Given value: -15 */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(4em, 1);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide positive number for divisions, between 2 and 1000! Given value: 1 */
-			}
-		}
-
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate(4em, 1001);
-			}
-
-			@include sass-true.contains() {
-				/* ERROR [generate($spacing, $divisions)]: */
-				/*   Please provide positive number for divisions, between 2 and 1000! Given value: 1001 */
-			}
-		}
-	}
-
-	@include sass-true.it('should have 12 columns if division not specified. If spacing not specified, padding should be 0') {
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate();
-			}
-
-			@include sass-true.expect() {
-				.row {
-					display: flex;
-					flex-wrap: wrap;
-				}
-
-				.row [class *= 'col-'], .row [class *= 'offset-'] {
-					box-sizing: border-box;
-					flex-shrink: 0;
-					max-width: 100%;
-					padding: 0 0;
-				}
-					
-				.col-auto {
-					flex: 0 0 auto;
-					width: auto;
-					padding: 0 0;
-				}
-					
-				@media only screen and (width >= 576px) {
-					.row.reverse-row-sm {
-						flex-direction: row-reverse;
-					}
-				}
-					
-				@media only screen and (width >= 768px) {
-					.row.reverse-row-md {
-						flex-direction: row-reverse;
-					}
-				}
-					
-				@media only screen and (width >= 992px) {
-					.row.reverse-row-lg {
-						flex-direction: row-reverse;
-					}
-				}
-					
-				@media only screen and (width >= 1200px) {
-					.row.reverse-row-xl {
-						flex-direction: row-reverse;
-					}
-				}
-					
-				@media only screen and (width >= 1400px) {
-					.row.reverse-row-xxl {
-						flex-direction: row-reverse;
-					}
-				}
-					
-				.row.reverse-row-under-sm {
-					flex-direction: row-reverse;
-					
-					@media only screen and (width >= 576px) {
-						flex-direction: row;
-					}
-				}
-					
-				.row.reverse-row-under-md {
-					flex-direction: row-reverse;
-					
-					@media only screen and (width >= 768px) {
-						flex-direction: row;
-					}
-				}
-					
-				.row.reverse-row-under-lg {
-					flex-direction: row-reverse;
-					
-					@media only screen and (width >= 992px) {
-						flex-direction: row;
-					}
-				}
-					
-				.row.reverse-row-under-xl {
-					flex-direction: row-reverse;
-					
-					@media only screen and (width >= 1200px) {
-						flex-direction: row;
-					}
-				}
-					
-				.row.reverse-row-under-xxl {
-					flex-direction: row-reverse;
-					
-					@media only screen and (width >= 1400px) {
-						flex-direction: row;
-					}
-				}
-					
-				.col-1 {
-					flex: 0 0 auto;
-					width: 8.3333333333%;
-					padding: 0 0;
-				}
-					
-				.offset-1 {
-					margin-left: 8.3333333333%;
-				}
-					
-				.col-2 {
-					flex: 0 0 auto;
-					width: 16.6666666667%;
-					padding: 0 0;
-				}
-					
-				.offset-2 {
-					margin-left: 16.6666666667%;
-				}
-					
-				.col-3 {
-					flex: 0 0 auto;
-					width: 25%;
-					padding: 0 0;
-				}
-					
-				.offset-3 {
-					margin-left: 25%;
-				}
-					
-				.col-4 {
-					flex: 0 0 auto;
-					width: 33.3333333333%;
-					padding: 0 0;
-				}
-					
-				.offset-4 {
-					margin-left: 33.3333333333%;
-				}
-					
-				.col-5 {
-					flex: 0 0 auto;
-					width: 41.6666666667%;
-					padding: 0 0;
-				}
-					
-				.offset-5 {
-					margin-left: 41.6666666667%;
-				}
-					
-				.col-6 {
-					flex: 0 0 auto;
-					width: 50%;
-					padding: 0 0;
-				}
-					
-				.offset-6 {
-					margin-left: 50%;
-				}
-					
-				.col-7 {
-					flex: 0 0 auto;
-					width: 58.3333333333%;
-					padding: 0 0;
-				}
-					
-				.offset-7 {
-					margin-left: 58.3333333333%;
-				}
-					
-				.col-8 {
-					flex: 0 0 auto;
-					width: 66.6666666667%;
-					padding: 0 0;
-				}
-					
-				.offset-8 {
-					margin-left: 66.6666666667%;
-				}
-					
-				.col-9 {
-					flex: 0 0 auto;
-					width: 75%;
-					padding: 0 0;
-				}
-					
-				.offset-9 {
-					margin-left: 75%;
-				}
-					
-				.col-10 {
-					flex: 0 0 auto;
-					width: 83.3333333333%;
-					padding: 0 0;
-				}
-					
-				.offset-10 {
-					margin-left: 83.3333333333%;
-				}
-					
-				.col-11 {
-					flex: 0 0 auto;
-					width: 91.6666666667%;
-					padding: 0 0;
-				}
-					
-				.offset-11 {
-					margin-left: 91.6666666667%;
-				}
-					
-				.col-12 {
-					flex: 0 0 auto;
-					width: 100%;
-					padding: 0 0;
-				}
-					
-				.offset-12 {
-					margin-left: 100%;
-				}
-					
-				@media only screen and (width >= 576px) {
-					.col-sm-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 0;
-					}
-					
-					.col-sm-1 {
-						flex: 0 0 auto;
-						width: 8.3333333333%;
-					}
-					
-					.offset-sm-1 {
-						margin-left: 8.3333333333%;
-					}
-					
-					.col-sm-2 {
-						flex: 0 0 auto;
-						width: 16.6666666667%;
-					}
-					
-					.offset-sm-2 {
-						margin-left: 16.6666666667%;
-					}
-					
-					.col-sm-3 {
-						flex: 0 0 auto;
-						width: 25%;
-					}
-					
-					.offset-sm-3 {
-						margin-left: 25%;
-					}
-					
-					.col-sm-4 {
-						flex: 0 0 auto;
-						width: 33.3333333333%;
-					}
-					
-					.offset-sm-4 {
-						margin-left: 33.3333333333%;
-					}
-					
-					.col-sm-5 {
-						flex: 0 0 auto;
-						width: 41.6666666667%;
-					}
-					
-					.offset-sm-5 {
-						margin-left: 41.6666666667%;
-					}
-					
-					.col-sm-6 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-					
-					.offset-sm-6 {
-						margin-left: 50%;
-					}
-					
-					.col-sm-7 {
-						flex: 0 0 auto;
-						width: 58.3333333333%;
-					}
-					
-					.offset-sm-7 {
-						margin-left: 58.3333333333%;
-					}
-					
-					.col-sm-8 {
-						flex: 0 0 auto;
-						width: 66.6666666667%;
-					}
-					
-					.offset-sm-8 {
-						margin-left: 66.6666666667%;
-					}
-					
-					.col-sm-9 {
-						flex: 0 0 auto;
-						width: 75%;
-					}
-					
-					.offset-sm-9 {
-						margin-left: 75%;
-					}
-					
-					.col-sm-10 {
-						flex: 0 0 auto;
-						width: 83.3333333333%;
-					}
-					
-					.offset-sm-10 {
-						margin-left: 83.3333333333%;
-					}
-					
-					.col-sm-11 {
-						flex: 0 0 auto;
-						width: 91.6666666667%;
-					}
-					
-					.offset-sm-11 {
-						margin-left: 91.6666666667%;
-					}
-					
-					.col-sm-12 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-					
-					.offset-sm-12 {
-						margin-left: 100%;
-					}
-				}
-					
-				@media only screen and (width >= 768px) {
-					.col-md-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 0;
-					}
-					
-					.col-md-1 {
-						flex: 0 0 auto;
-						width: 8.3333333333%;
-					}
-					
-					.offset-md-1 {
-						margin-left: 8.3333333333%;
-					}
-					
-					.col-md-2 {
-						flex: 0 0 auto;
-						width: 16.6666666667%;
-					}
-					
-					.offset-md-2 {
-						margin-left: 16.6666666667%;
-					}
-					
-					.col-md-3 {
-						flex: 0 0 auto;
-						width: 25%;
-					}
-					
-					.offset-md-3 {
-						margin-left: 25%;
-					}
-					
-					.col-md-4 {
-						flex: 0 0 auto;
-						width: 33.3333333333%;
-					}
-					
-					.offset-md-4 {
-						margin-left: 33.3333333333%;
-					}
-					
-					.col-md-5 {
-						flex: 0 0 auto;
-						width: 41.6666666667%;
-					}
-					
-					.offset-md-5 {
-						margin-left: 41.6666666667%;
-					}
-					
-					.col-md-6 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-					
-					.offset-md-6 {
-						margin-left: 50%;
-					}
-					
-					.col-md-7 {
-						flex: 0 0 auto;
-						width: 58.3333333333%;
-					}
-					
-					.offset-md-7 {
-						margin-left: 58.3333333333%;
-					}
-					
-					.col-md-8 {
-						flex: 0 0 auto;
-						width: 66.6666666667%;
-					}
-					
-					.offset-md-8 {
-						margin-left: 66.6666666667%;
-					}
-					
-					.col-md-9 {
-						flex: 0 0 auto;
-						width: 75%;
-					}
-					
-					.offset-md-9 {
-						margin-left: 75%;
-					}
-					
-					.col-md-10 {
-						flex: 0 0 auto;
-						width: 83.3333333333%;
-					}
-					
-					.offset-md-10 {
-						margin-left: 83.3333333333%;
-					}
-					
-					.col-md-11 {
-						flex: 0 0 auto;
-						width: 91.6666666667%;
-					}
-					
-					.offset-md-11 {
-						margin-left: 91.6666666667%;
-					}
-					
-					.col-md-12 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-					
-					.offset-md-12 {
-						margin-left: 100%;
-					}
-				}
-					
-				@media only screen and (width >= 992px) {
-					.col-lg-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 0;
-					}
-					
-					.col-lg-1 {
-						flex: 0 0 auto;
-						width: 8.3333333333%;
-					}
-					
-					.offset-lg-1 {
-						margin-left: 8.3333333333%;
-					}
-					
-					.col-lg-2 {
-						flex: 0 0 auto;
-						width: 16.6666666667%;
-					}
-					
-					.offset-lg-2 {
-						margin-left: 16.6666666667%;
-					}
-					
-					.col-lg-3 {
-						flex: 0 0 auto;
-						width: 25%;
-					}
-					
-					.offset-lg-3 {
-						margin-left: 25%;
-					}
-					
-					.col-lg-4 {
-						flex: 0 0 auto;
-						width: 33.3333333333%;
-					}
-					
-					.offset-lg-4 {
-						margin-left: 33.3333333333%;
-					}
-					
-					.col-lg-5 {
-						flex: 0 0 auto;
-						width: 41.6666666667%;
-					}
-					
-					.offset-lg-5 {
-						margin-left: 41.6666666667%;
-					}
-					
-					.col-lg-6 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-					
-					.offset-lg-6 {
-						margin-left: 50%;
-					}
-					
-					.col-lg-7 {
-						flex: 0 0 auto;
-						width: 58.3333333333%;
-					}
-					
-					.offset-lg-7 {
-						margin-left: 58.3333333333%;
-					}
-					
-					.col-lg-8 {
-						flex: 0 0 auto;
-						width: 66.6666666667%;
-					}
-					
-					.offset-lg-8 {
-						margin-left: 66.6666666667%;
-					}
-					
-					.col-lg-9 {
-						flex: 0 0 auto;
-						width: 75%;
-					}
-					
-					.offset-lg-9 {
-						margin-left: 75%;
-					}
-					
-					.col-lg-10 {
-						flex: 0 0 auto;
-						width: 83.3333333333%;
-					}
-					
-					.offset-lg-10 {
-						margin-left: 83.3333333333%;
-					}
-					
-					.col-lg-11 {
-						flex: 0 0 auto;
-						width: 91.6666666667%;
-					}
-					
-					.offset-lg-11 {
-						margin-left: 91.6666666667%;
-					}
-					
-					.col-lg-12 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-					
-					.offset-lg-12 {
-						margin-left: 100%;
-					}
-				}
-					
-				@media only screen and (width >= 1200px) {
-					.col-xl-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 0;
-					}
-					
-					.col-xl-1 {
-						flex: 0 0 auto;
-						width: 8.3333333333%;
-					}
-					
-					.offset-xl-1 {
-						margin-left: 8.3333333333%;
-					}
-					
-					.col-xl-2 {
-						flex: 0 0 auto;
-						width: 16.6666666667%;
-					}
-					
-					.offset-xl-2 {
-						margin-left: 16.6666666667%;
-					}
-					
-					.col-xl-3 {
-						flex: 0 0 auto;
-						width: 25%;
-					}
-					
-					.offset-xl-3 {
-						margin-left: 25%;
-					}
-					
-					.col-xl-4 {
-						flex: 0 0 auto;
-						width: 33.3333333333%;
-					}
-					
-					.offset-xl-4 {
-						margin-left: 33.3333333333%;
-					}
-					
-					.col-xl-5 {
-						flex: 0 0 auto;
-						width: 41.6666666667%;
-					}
-					
-					.offset-xl-5 {
-						margin-left: 41.6666666667%;
-					}
-					
-					.col-xl-6 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-					
-					.offset-xl-6 {
-						margin-left: 50%;
-					}
-					
-					.col-xl-7 {
-						flex: 0 0 auto;
-						width: 58.3333333333%;
-					}
-					
-					.offset-xl-7 {
-						margin-left: 58.3333333333%;
-					}
-					
-					.col-xl-8 {
-						flex: 0 0 auto;
-						width: 66.6666666667%;
-					}
-					
-					.offset-xl-8 {
-						margin-left: 66.6666666667%;
-					}
-					
-					.col-xl-9 {
-						flex: 0 0 auto;
-						width: 75%;
-					}
-					
-					.offset-xl-9 {
-						margin-left: 75%;
-					}
-					
-					.col-xl-10 {
-						flex: 0 0 auto;
-						width: 83.3333333333%;
-					}
-					
-					.offset-xl-10 {
-						margin-left: 83.3333333333%;
-					}
-					
-					.col-xl-11 {
-						flex: 0 0 auto;
-						width: 91.6666666667%;
-					}
-					
-					.offset-xl-11 {
-						margin-left: 91.6666666667%;
-					}
-					
-					.col-xl-12 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-					
-					.offset-xl-12 {
-						margin-left: 100%;
-					}
-				}
-					
-				@media only screen and (width >= 1400px) {
-					.col-xxl-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 0;
-					}
-					
-					.col-xxl-1 {
-						flex: 0 0 auto;
-						width: 8.3333333333%;
-					}
-					
-					.offset-xxl-1 {
-						margin-left: 8.3333333333%;
-					}
-					
-					.col-xxl-2 {
-						flex: 0 0 auto;
-						width: 16.6666666667%;
-					}
-					
-					.offset-xxl-2 {
-						margin-left: 16.6666666667%;
-					}
-					
-					.col-xxl-3 {
-						flex: 0 0 auto;
-						width: 25%;
-					}
-					
-					.offset-xxl-3 {
-						margin-left: 25%;
-					}
-					
-					.col-xxl-4 {
-						flex: 0 0 auto;
-						width: 33.3333333333%;
-					}
-					
-					.offset-xxl-4 {
-						margin-left: 33.3333333333%;
-					}
-					
-					.col-xxl-5 {
-						flex: 0 0 auto;
-						width: 41.6666666667%;
-					}
-					
-					.offset-xxl-5 {
-						margin-left: 41.6666666667%;
-					}
-					
-					.col-xxl-6 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-					
-					.offset-xxl-6 {
-						margin-left: 50%;
-					}
-					
-					.col-xxl-7 {
-						flex: 0 0 auto;
-						width: 58.3333333333%;
-					}
-					
-					.offset-xxl-7 {
-						margin-left: 58.3333333333%;
-					}
-					
-					.col-xxl-8 {
-						flex: 0 0 auto;
-						width: 66.6666666667%;
-					}
-					
-					.offset-xxl-8 {
-						margin-left: 66.6666666667%;
-					}
-					
-					.col-xxl-9 {
-						flex: 0 0 auto;
-						width: 75%;
-					}
-					
-					.offset-xxl-9 {
-						margin-left: 75%;
-					}
-					
-					.col-xxl-10 {
-						flex: 0 0 auto;
-						width: 83.3333333333%;
-					}
-					
-					.offset-xxl-10 {
-						margin-left: 83.3333333333%;
-					}
-					
-					.col-xxl-11 {
-						flex: 0 0 auto;
-						width: 91.6666666667%;
-					}
-					
-					.offset-xxl-11 {
-						margin-left: 91.6666666667%;
-					}
-					
-					.col-xxl-12 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-					
-					.offset-xxl-12 {
-						margin-left: 100%;
-					}
-				}
-			}
-		}
-	}
-
-	@include sass-true.it('should have 2 columns. padding should be 8px') {
-		@include sass-true.assert() {
-			@include sass-true.output() {
-				@include grid.generate($spacing: 8px, $divisions: 2);
-			}
-
-			@include sass-true.expect() {
-				.row {
-					display: flex;
-					flex-wrap: wrap;
-					margin: 0 -8px;
-
-					[class *= 'col-'], [class *= 'offset-'] {
-						box-sizing: border-box;
-						flex-shrink: 0;
-						max-width: 100%;
-						padding: 0 8px;
-					}
-				}
-                    
-				.col-auto {
-					flex: 0 0 auto;
-					width: auto;
-					padding: 0 8px;
-				}
-
-				@media only screen and (width >= 576px) {
-					.row.reverse-row-sm {
-						flex-direction: row-reverse;
-					}
-				}
-				@media only screen and (width >= 768px) {
-					.row.reverse-row-md {
-						flex-direction: row-reverse;
-					}
-				}
-				@media only screen and (width >= 992px) {
-					.row.reverse-row-lg {
-						flex-direction: row-reverse;
-					}
-				}
-				@media only screen and (width >= 1200px) {
-					.row.reverse-row-xl {
-						flex-direction: row-reverse;
-					}
-				}
-				@media only screen and (width >= 1400px) {
-					.row.reverse-row-xxl {
-						flex-direction: row-reverse;
-					}
-				}
-
-				.row.reverse-row-under-sm {
-					flex-direction: row-reverse;
-					@media only screen and (width >= 576px) {
-						flex-direction: row;
-					}
-				}
-
-				.row.reverse-row-under-md {
-					flex-direction: row-reverse;
-					@media only screen and (width >= 768px) {
-						flex-direction: row;
-					}
-				}
-
-				.row.reverse-row-under-lg {
-					flex-direction: row-reverse;
-					@media only screen and (width >= 992px) {
-						flex-direction: row;
-					}
-				}
-
-				.row.reverse-row-under-xl {
-					flex-direction: row-reverse;
-					@media only screen and (width >= 1200px) {
-						flex-direction: row;
-					}
-				}
-
-				.row.reverse-row-under-xxl {
-					flex-direction: row-reverse;
-					@media only screen and (width >= 1400px) {
-						flex-direction: row;
-					}
-				}
-                    
-				.col-1 {
-					flex: 0 0 auto;
-					width: 50%;
-					padding: 0 8px;
-				}
-                    
-				.offset-1 {
-					margin-left: 50%;
-				}
-                    
-				.col-2 {
-					flex: 0 0 auto;
-					width: 100%;
-					padding: 0 8px;
-				}
-                    
-				.offset-2 {
-					margin-left: 100%;
-				}
-
-				@media only screen and (width >= 576px) {
-					.col-sm-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 8px;
-					}
-				  
-					.col-sm-1 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-				  
-					.offset-sm-1 {
-						margin-left: 50%;
-					}
-				  
-					.col-sm-2 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-				  
-					.offset-sm-2 {
-						margin-left: 100%;
-					}
-				}
-
-				@media only screen and (width >= 768px) {
-					.col-md-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 8px;
-					}
-				  
-					.col-md-1 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-				  
-					.offset-md-1 {
-						margin-left: 50%;
-					}
-				  
-					.col-md-2 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-				  
-					.offset-md-2 {
-						margin-left: 100%;
-					}
-				}
-
-				@media only screen and (width >= 992px) {
-					.col-lg-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 8px;
-					}
-				  
-					.col-lg-1 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-				  
-					.offset-lg-1 {
-						margin-left: 50%;
-					}
-				  
-					.col-lg-2 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-				  
-					.offset-lg-2 {
-						margin-left: 100%;
-					}
-				}
-
-				@media only screen and (width >= 1200px) {
-					.col-xl-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 8px;
-					}
-				  
-					.col-xl-1 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-				  
-					.offset-xl-1 {
-						margin-left: 50%;
-					}
-				  
-					.col-xl-2 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-				  
-					.offset-xl-2 {
-						margin-left: 100%;
-					}
-				}
-
-				@media only screen and (width >= 1400px) {
-					.col-xxl-auto {
-						flex: 0 0 auto;
-						width: auto;
-						padding: 0 8px;
-					}
-				  
-					.col-xxl-1 {
-						flex: 0 0 auto;
-						width: 50%;
-					}
-				  
-					.offset-xxl-1 {
-						margin-left: 50%;
-					}
-				  
-					.col-xxl-2 {
-						flex: 0 0 auto;
-						width: 100%;
-					}
-				  
-					.offset-xxl-2 {
-						margin-left: 100%;
-					}
-				}
-			}
-		}
-	}
+/* stylelint-disable pitcher/max-lines */
+/* stylelint-disable csstools/use-nesting */
+/* stylelint-disable selector-max-attribute */
+/* stylelint-disable shorthand-property-no-redundant-values */
+/* stylelint-disable number-max-precision */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable at-rule-allowed-list */
+@use '../../src/modules/layout/grid';
+@use '../../src/modules/variables' as vars;
+@use 'sass-true';
+
+vars.$testing: true;
+
+@include sass-true.describe('generate($spacing, $divisions)') {
+	@include sass-true.it('should throw if spacing is not a number') {
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(null);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide number parameter! Given value:  */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate('abcd1234');
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide number parameter! Given value: abcd1234 */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(#FFEEAA);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide number parameter! Given value: #FFEEAA */
+			}
+		}
+	}
+
+	@include sass-true.it('should throw if $division is not a number or outside of bounds') {
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(4em, 'abba');
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide positive number for divisions, between 2 and 1000! Given value: abba */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(4em, null);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide positive number for divisions, between 2 and 1000! Given value:  */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(4em, #FFEEAA);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide positive number for divisions, between 2 and 1000! Given value: #FFEEAA */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(4em, -15);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide positive number for divisions, between 2 and 1000! Given value: -15 */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(4em, 1);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide positive number for divisions, between 2 and 1000! Given value: 1 */
+			}
+		}
+
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate(4em, 1001);
+			}
+
+			@include sass-true.contains() {
+				/* ERROR [generate($spacing, $divisions)]: */
+				/*   Please provide positive number for divisions, between 2 and 1000! Given value: 1001 */
+			}
+		}
+	}
+
+	@include sass-true.it('should have 12 columns if division not specified. If spacing not specified, padding should be 0') {
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate();
+			}
+
+			@include sass-true.expect() {
+				.row {
+					display: flex;
+					flex-wrap: wrap;
+				}
+
+				.row [class *= 'col-'], .row [class *= 'offset-'] {
+					box-sizing: border-box;
+					flex-shrink: 0;
+					max-width: 100%;
+					padding: 0 0;
+				}
+					
+				.col-auto {
+					flex: 0 0 auto;
+					width: auto;
+					padding: 0 0;
+				}
+					
+				@media only screen and (width >= 576px) {
+					.row.reverse-row-sm {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				@media only screen and (width >= 768px) {
+					.row.reverse-row-md {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				@media only screen and (width >= 992px) {
+					.row.reverse-row-lg {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				@media only screen and (width >= 1200px) {
+					.row.reverse-row-xl {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				@media only screen and (width >= 1400px) {
+					.row.reverse-row-xxl {
+						flex-direction: row-reverse;
+					}
+				}
+					
+				.row.reverse-row-under-sm {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 576px) {
+						flex-direction: row;
+					}
+				}
+					
+				.row.reverse-row-under-md {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 768px) {
+						flex-direction: row;
+					}
+				}
+					
+				.row.reverse-row-under-lg {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 992px) {
+						flex-direction: row;
+					}
+				}
+					
+				.row.reverse-row-under-xl {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 1200px) {
+						flex-direction: row;
+					}
+				}
+					
+				.row.reverse-row-under-xxl {
+					flex-direction: row-reverse;
+					
+					@media only screen and (width >= 1400px) {
+						flex-direction: row;
+					}
+				}
+					
+				.col-1 {
+					flex: 0 0 auto;
+					width: 8.3333333333%;
+					padding: 0 0;
+				}
+					
+				.offset-1 {
+					margin-left: 8.3333333333%;
+				}
+					
+				.col-2 {
+					flex: 0 0 auto;
+					width: 16.6666666667%;
+					padding: 0 0;
+				}
+					
+				.offset-2 {
+					margin-left: 16.6666666667%;
+				}
+					
+				.col-3 {
+					flex: 0 0 auto;
+					width: 25%;
+					padding: 0 0;
+				}
+					
+				.offset-3 {
+					margin-left: 25%;
+				}
+					
+				.col-4 {
+					flex: 0 0 auto;
+					width: 33.3333333333%;
+					padding: 0 0;
+				}
+					
+				.offset-4 {
+					margin-left: 33.3333333333%;
+				}
+					
+				.col-5 {
+					flex: 0 0 auto;
+					width: 41.6666666667%;
+					padding: 0 0;
+				}
+					
+				.offset-5 {
+					margin-left: 41.6666666667%;
+				}
+					
+				.col-6 {
+					flex: 0 0 auto;
+					width: 50%;
+					padding: 0 0;
+				}
+					
+				.offset-6 {
+					margin-left: 50%;
+				}
+					
+				.col-7 {
+					flex: 0 0 auto;
+					width: 58.3333333333%;
+					padding: 0 0;
+				}
+					
+				.offset-7 {
+					margin-left: 58.3333333333%;
+				}
+					
+				.col-8 {
+					flex: 0 0 auto;
+					width: 66.6666666667%;
+					padding: 0 0;
+				}
+					
+				.offset-8 {
+					margin-left: 66.6666666667%;
+				}
+					
+				.col-9 {
+					flex: 0 0 auto;
+					width: 75%;
+					padding: 0 0;
+				}
+					
+				.offset-9 {
+					margin-left: 75%;
+				}
+					
+				.col-10 {
+					flex: 0 0 auto;
+					width: 83.3333333333%;
+					padding: 0 0;
+				}
+					
+				.offset-10 {
+					margin-left: 83.3333333333%;
+				}
+					
+				.col-11 {
+					flex: 0 0 auto;
+					width: 91.6666666667%;
+					padding: 0 0;
+				}
+					
+				.offset-11 {
+					margin-left: 91.6666666667%;
+				}
+					
+				.col-12 {
+					flex: 0 0 auto;
+					width: 100%;
+					padding: 0 0;
+				}
+					
+				.offset-12 {
+					margin-left: 100%;
+				}
+					
+				@media only screen and (width >= 576px) {
+					.col-sm-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 0;
+					}
+					
+					.col-sm-1 {
+						flex: 0 0 auto;
+						width: 8.3333333333%;
+					}
+					
+					.offset-sm-1 {
+						margin-left: 8.3333333333%;
+					}
+					
+					.col-sm-2 {
+						flex: 0 0 auto;
+						width: 16.6666666667%;
+					}
+					
+					.offset-sm-2 {
+						margin-left: 16.6666666667%;
+					}
+					
+					.col-sm-3 {
+						flex: 0 0 auto;
+						width: 25%;
+					}
+					
+					.offset-sm-3 {
+						margin-left: 25%;
+					}
+					
+					.col-sm-4 {
+						flex: 0 0 auto;
+						width: 33.3333333333%;
+					}
+					
+					.offset-sm-4 {
+						margin-left: 33.3333333333%;
+					}
+					
+					.col-sm-5 {
+						flex: 0 0 auto;
+						width: 41.6666666667%;
+					}
+					
+					.offset-sm-5 {
+						margin-left: 41.6666666667%;
+					}
+					
+					.col-sm-6 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+					
+					.offset-sm-6 {
+						margin-left: 50%;
+					}
+					
+					.col-sm-7 {
+						flex: 0 0 auto;
+						width: 58.3333333333%;
+					}
+					
+					.offset-sm-7 {
+						margin-left: 58.3333333333%;
+					}
+					
+					.col-sm-8 {
+						flex: 0 0 auto;
+						width: 66.6666666667%;
+					}
+					
+					.offset-sm-8 {
+						margin-left: 66.6666666667%;
+					}
+					
+					.col-sm-9 {
+						flex: 0 0 auto;
+						width: 75%;
+					}
+					
+					.offset-sm-9 {
+						margin-left: 75%;
+					}
+					
+					.col-sm-10 {
+						flex: 0 0 auto;
+						width: 83.3333333333%;
+					}
+					
+					.offset-sm-10 {
+						margin-left: 83.3333333333%;
+					}
+					
+					.col-sm-11 {
+						flex: 0 0 auto;
+						width: 91.6666666667%;
+					}
+					
+					.offset-sm-11 {
+						margin-left: 91.6666666667%;
+					}
+					
+					.col-sm-12 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+					
+					.offset-sm-12 {
+						margin-left: 100%;
+					}
+				}
+					
+				@media only screen and (width >= 768px) {
+					.col-md-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 0;
+					}
+					
+					.col-md-1 {
+						flex: 0 0 auto;
+						width: 8.3333333333%;
+					}
+					
+					.offset-md-1 {
+						margin-left: 8.3333333333%;
+					}
+					
+					.col-md-2 {
+						flex: 0 0 auto;
+						width: 16.6666666667%;
+					}
+					
+					.offset-md-2 {
+						margin-left: 16.6666666667%;
+					}
+					
+					.col-md-3 {
+						flex: 0 0 auto;
+						width: 25%;
+					}
+					
+					.offset-md-3 {
+						margin-left: 25%;
+					}
+					
+					.col-md-4 {
+						flex: 0 0 auto;
+						width: 33.3333333333%;
+					}
+					
+					.offset-md-4 {
+						margin-left: 33.3333333333%;
+					}
+					
+					.col-md-5 {
+						flex: 0 0 auto;
+						width: 41.6666666667%;
+					}
+					
+					.offset-md-5 {
+						margin-left: 41.6666666667%;
+					}
+					
+					.col-md-6 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+					
+					.offset-md-6 {
+						margin-left: 50%;
+					}
+					
+					.col-md-7 {
+						flex: 0 0 auto;
+						width: 58.3333333333%;
+					}
+					
+					.offset-md-7 {
+						margin-left: 58.3333333333%;
+					}
+					
+					.col-md-8 {
+						flex: 0 0 auto;
+						width: 66.6666666667%;
+					}
+					
+					.offset-md-8 {
+						margin-left: 66.6666666667%;
+					}
+					
+					.col-md-9 {
+						flex: 0 0 auto;
+						width: 75%;
+					}
+					
+					.offset-md-9 {
+						margin-left: 75%;
+					}
+					
+					.col-md-10 {
+						flex: 0 0 auto;
+						width: 83.3333333333%;
+					}
+					
+					.offset-md-10 {
+						margin-left: 83.3333333333%;
+					}
+					
+					.col-md-11 {
+						flex: 0 0 auto;
+						width: 91.6666666667%;
+					}
+					
+					.offset-md-11 {
+						margin-left: 91.6666666667%;
+					}
+					
+					.col-md-12 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+					
+					.offset-md-12 {
+						margin-left: 100%;
+					}
+				}
+					
+				@media only screen and (width >= 992px) {
+					.col-lg-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 0;
+					}
+					
+					.col-lg-1 {
+						flex: 0 0 auto;
+						width: 8.3333333333%;
+					}
+					
+					.offset-lg-1 {
+						margin-left: 8.3333333333%;
+					}
+					
+					.col-lg-2 {
+						flex: 0 0 auto;
+						width: 16.6666666667%;
+					}
+					
+					.offset-lg-2 {
+						margin-left: 16.6666666667%;
+					}
+					
+					.col-lg-3 {
+						flex: 0 0 auto;
+						width: 25%;
+					}
+					
+					.offset-lg-3 {
+						margin-left: 25%;
+					}
+					
+					.col-lg-4 {
+						flex: 0 0 auto;
+						width: 33.3333333333%;
+					}
+					
+					.offset-lg-4 {
+						margin-left: 33.3333333333%;
+					}
+					
+					.col-lg-5 {
+						flex: 0 0 auto;
+						width: 41.6666666667%;
+					}
+					
+					.offset-lg-5 {
+						margin-left: 41.6666666667%;
+					}
+					
+					.col-lg-6 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+					
+					.offset-lg-6 {
+						margin-left: 50%;
+					}
+					
+					.col-lg-7 {
+						flex: 0 0 auto;
+						width: 58.3333333333%;
+					}
+					
+					.offset-lg-7 {
+						margin-left: 58.3333333333%;
+					}
+					
+					.col-lg-8 {
+						flex: 0 0 auto;
+						width: 66.6666666667%;
+					}
+					
+					.offset-lg-8 {
+						margin-left: 66.6666666667%;
+					}
+					
+					.col-lg-9 {
+						flex: 0 0 auto;
+						width: 75%;
+					}
+					
+					.offset-lg-9 {
+						margin-left: 75%;
+					}
+					
+					.col-lg-10 {
+						flex: 0 0 auto;
+						width: 83.3333333333%;
+					}
+					
+					.offset-lg-10 {
+						margin-left: 83.3333333333%;
+					}
+					
+					.col-lg-11 {
+						flex: 0 0 auto;
+						width: 91.6666666667%;
+					}
+					
+					.offset-lg-11 {
+						margin-left: 91.6666666667%;
+					}
+					
+					.col-lg-12 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+					
+					.offset-lg-12 {
+						margin-left: 100%;
+					}
+				}
+					
+				@media only screen and (width >= 1200px) {
+					.col-xl-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 0;
+					}
+					
+					.col-xl-1 {
+						flex: 0 0 auto;
+						width: 8.3333333333%;
+					}
+					
+					.offset-xl-1 {
+						margin-left: 8.3333333333%;
+					}
+					
+					.col-xl-2 {
+						flex: 0 0 auto;
+						width: 16.6666666667%;
+					}
+					
+					.offset-xl-2 {
+						margin-left: 16.6666666667%;
+					}
+					
+					.col-xl-3 {
+						flex: 0 0 auto;
+						width: 25%;
+					}
+					
+					.offset-xl-3 {
+						margin-left: 25%;
+					}
+					
+					.col-xl-4 {
+						flex: 0 0 auto;
+						width: 33.3333333333%;
+					}
+					
+					.offset-xl-4 {
+						margin-left: 33.3333333333%;
+					}
+					
+					.col-xl-5 {
+						flex: 0 0 auto;
+						width: 41.6666666667%;
+					}
+					
+					.offset-xl-5 {
+						margin-left: 41.6666666667%;
+					}
+					
+					.col-xl-6 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+					
+					.offset-xl-6 {
+						margin-left: 50%;
+					}
+					
+					.col-xl-7 {
+						flex: 0 0 auto;
+						width: 58.3333333333%;
+					}
+					
+					.offset-xl-7 {
+						margin-left: 58.3333333333%;
+					}
+					
+					.col-xl-8 {
+						flex: 0 0 auto;
+						width: 66.6666666667%;
+					}
+					
+					.offset-xl-8 {
+						margin-left: 66.6666666667%;
+					}
+					
+					.col-xl-9 {
+						flex: 0 0 auto;
+						width: 75%;
+					}
+					
+					.offset-xl-9 {
+						margin-left: 75%;
+					}
+					
+					.col-xl-10 {
+						flex: 0 0 auto;
+						width: 83.3333333333%;
+					}
+					
+					.offset-xl-10 {
+						margin-left: 83.3333333333%;
+					}
+					
+					.col-xl-11 {
+						flex: 0 0 auto;
+						width: 91.6666666667%;
+					}
+					
+					.offset-xl-11 {
+						margin-left: 91.6666666667%;
+					}
+					
+					.col-xl-12 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+					
+					.offset-xl-12 {
+						margin-left: 100%;
+					}
+				}
+					
+				@media only screen and (width >= 1400px) {
+					.col-xxl-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 0;
+					}
+					
+					.col-xxl-1 {
+						flex: 0 0 auto;
+						width: 8.3333333333%;
+					}
+					
+					.offset-xxl-1 {
+						margin-left: 8.3333333333%;
+					}
+					
+					.col-xxl-2 {
+						flex: 0 0 auto;
+						width: 16.6666666667%;
+					}
+					
+					.offset-xxl-2 {
+						margin-left: 16.6666666667%;
+					}
+					
+					.col-xxl-3 {
+						flex: 0 0 auto;
+						width: 25%;
+					}
+					
+					.offset-xxl-3 {
+						margin-left: 25%;
+					}
+					
+					.col-xxl-4 {
+						flex: 0 0 auto;
+						width: 33.3333333333%;
+					}
+					
+					.offset-xxl-4 {
+						margin-left: 33.3333333333%;
+					}
+					
+					.col-xxl-5 {
+						flex: 0 0 auto;
+						width: 41.6666666667%;
+					}
+					
+					.offset-xxl-5 {
+						margin-left: 41.6666666667%;
+					}
+					
+					.col-xxl-6 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+					
+					.offset-xxl-6 {
+						margin-left: 50%;
+					}
+					
+					.col-xxl-7 {
+						flex: 0 0 auto;
+						width: 58.3333333333%;
+					}
+					
+					.offset-xxl-7 {
+						margin-left: 58.3333333333%;
+					}
+					
+					.col-xxl-8 {
+						flex: 0 0 auto;
+						width: 66.6666666667%;
+					}
+					
+					.offset-xxl-8 {
+						margin-left: 66.6666666667%;
+					}
+					
+					.col-xxl-9 {
+						flex: 0 0 auto;
+						width: 75%;
+					}
+					
+					.offset-xxl-9 {
+						margin-left: 75%;
+					}
+					
+					.col-xxl-10 {
+						flex: 0 0 auto;
+						width: 83.3333333333%;
+					}
+					
+					.offset-xxl-10 {
+						margin-left: 83.3333333333%;
+					}
+					
+					.col-xxl-11 {
+						flex: 0 0 auto;
+						width: 91.6666666667%;
+					}
+					
+					.offset-xxl-11 {
+						margin-left: 91.6666666667%;
+					}
+					
+					.col-xxl-12 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+					
+					.offset-xxl-12 {
+						margin-left: 100%;
+					}
+				}
+			}
+		}
+	}
+
+	@include sass-true.it('should have 2 columns. padding should be 8px') {
+		@include sass-true.assert() {
+			@include sass-true.output() {
+				@include grid.generate($spacing: 8px, $divisions: 2);
+			}
+
+			@include sass-true.expect() {
+				.row {
+					display: flex;
+					flex-wrap: wrap;
+					margin: 0 -8px;
+
+					[class *= 'col-'], [class *= 'offset-'] {
+						box-sizing: border-box;
+						flex-shrink: 0;
+						max-width: 100%;
+						padding: 0 8px;
+					}
+				}
+                    
+				.col-auto {
+					flex: 0 0 auto;
+					width: auto;
+					padding: 0 8px;
+				}
+
+				@media only screen and (width >= 576px) {
+					.row.reverse-row-sm {
+						flex-direction: row-reverse;
+					}
+				}
+				@media only screen and (width >= 768px) {
+					.row.reverse-row-md {
+						flex-direction: row-reverse;
+					}
+				}
+				@media only screen and (width >= 992px) {
+					.row.reverse-row-lg {
+						flex-direction: row-reverse;
+					}
+				}
+				@media only screen and (width >= 1200px) {
+					.row.reverse-row-xl {
+						flex-direction: row-reverse;
+					}
+				}
+				@media only screen and (width >= 1400px) {
+					.row.reverse-row-xxl {
+						flex-direction: row-reverse;
+					}
+				}
+
+				.row.reverse-row-under-sm {
+					flex-direction: row-reverse;
+					@media only screen and (width >= 576px) {
+						flex-direction: row;
+					}
+				}
+
+				.row.reverse-row-under-md {
+					flex-direction: row-reverse;
+					@media only screen and (width >= 768px) {
+						flex-direction: row;
+					}
+				}
+
+				.row.reverse-row-under-lg {
+					flex-direction: row-reverse;
+					@media only screen and (width >= 992px) {
+						flex-direction: row;
+					}
+				}
+
+				.row.reverse-row-under-xl {
+					flex-direction: row-reverse;
+					@media only screen and (width >= 1200px) {
+						flex-direction: row;
+					}
+				}
+
+				.row.reverse-row-under-xxl {
+					flex-direction: row-reverse;
+					@media only screen and (width >= 1400px) {
+						flex-direction: row;
+					}
+				}
+                    
+				.col-1 {
+					flex: 0 0 auto;
+					width: 50%;
+					padding: 0 8px;
+				}
+                    
+				.offset-1 {
+					margin-left: 50%;
+				}
+                    
+				.col-2 {
+					flex: 0 0 auto;
+					width: 100%;
+					padding: 0 8px;
+				}
+                    
+				.offset-2 {
+					margin-left: 100%;
+				}
+
+				@media only screen and (width >= 576px) {
+					.col-sm-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 8px;
+					}
+				  
+					.col-sm-1 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+				  
+					.offset-sm-1 {
+						margin-left: 50%;
+					}
+				  
+					.col-sm-2 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+				  
+					.offset-sm-2 {
+						margin-left: 100%;
+					}
+				}
+
+				@media only screen and (width >= 768px) {
+					.col-md-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 8px;
+					}
+				  
+					.col-md-1 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+				  
+					.offset-md-1 {
+						margin-left: 50%;
+					}
+				  
+					.col-md-2 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+				  
+					.offset-md-2 {
+						margin-left: 100%;
+					}
+				}
+
+				@media only screen and (width >= 992px) {
+					.col-lg-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 8px;
+					}
+				  
+					.col-lg-1 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+				  
+					.offset-lg-1 {
+						margin-left: 50%;
+					}
+				  
+					.col-lg-2 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+				  
+					.offset-lg-2 {
+						margin-left: 100%;
+					}
+				}
+
+				@media only screen and (width >= 1200px) {
+					.col-xl-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 8px;
+					}
+				  
+					.col-xl-1 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+				  
+					.offset-xl-1 {
+						margin-left: 50%;
+					}
+				  
+					.col-xl-2 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+				  
+					.offset-xl-2 {
+						margin-left: 100%;
+					}
+				}
+
+				@media only screen and (width >= 1400px) {
+					.col-xxl-auto {
+						flex: 0 0 auto;
+						width: auto;
+						padding: 0 8px;
+					}
+				  
+					.col-xxl-1 {
+						flex: 0 0 auto;
+						width: 50%;
+					}
+				  
+					.offset-xxl-1 {
+						margin-left: 50%;
+					}
+				  
+					.col-xxl-2 {
+						flex: 0 0 auto;
+						width: 100%;
+					}
+				  
+					.offset-xxl-2 {
+						margin-left: 100%;
+					}
+				}
+			}
+		}
+	}
 }