/* ========================================================================== 
// Base class for the default grid layout 
========================================================================== */
 .g {
	 display: grid;
	 column-gap: 15px;
	 row-gap: 15px;
	 grid-template-columns: repeat(12, 1fr);
}
 .g > * {
	 grid-column-start: span 12;
	 position: relative;
	 min-height: 1px;
}
 .g.grid10 {
	 grid-template-columns: repeat(10, 1fr);
}
 .g.cg0 {
	 column-gap: 0px;
}
 .g.rg0 {
	 row-gap: 0px;
}
 .g.cg1 {
	 column-gap: 10px;
}
 .g.rg1 {
	 row-gap: 10px;
}
 .g.cg2 {
	 column-gap: 20px;
}
 .g.rg2 {
	 row-gap: 20px;
}
 .g.cg3 {
	 column-gap: 30px;
}
 .g.rg3 {
	 row-gap: 30px;
}
 .g.cg4 {
	 column-gap: 40px;
}
 .g.rg4 {
	 row-gap: 40px;
}
 .g.cg5 {
	 column-gap: 50px;
}
 .g.rg5 {
	 row-gap: 50px;
}
 .g.cg6 {
	 column-gap: 60px;
}
 .g.rg6 {
	 row-gap: 60px;
}
/* ========================================================================== 
// Media query for large screens (>= 992px) 
========================================================================== */
 @media (min-width: 992px) {
	 .g.md2 {
		 grid-template-columns: var(--g2);
	}
	 .g.md3 {
		 grid-template-columns: var(--g3);
	}
	 .g.md4 {
		 grid-template-columns: var(--g4);
	}
	 .g.md5 {
		 grid-template-columns: var(--g5);
	}
	 .g.md6 {
		 grid-template-columns: var(--g6);
	}
	 .g.md2 > *, .g.md3 > *, .g.md4 > *, .g.md5 > *, .g.md6 > * {
		 grid-column-start: auto;
	}
	 .g.mdoff1 {
		 width: calc(100% - 1 * 10%);
		 margin-left: auto;
		 margin-right: auto;
	}
	 .g.mdoff2 {
		 width: calc(100% - 2 * 10%);
		 margin-left: auto;
		 margin-right: auto;
	}
	 .g.mdoff3 {
		 width: calc(100% - 3 * 10%);
		 margin-left: auto;
		 margin-right: auto;
	}
	 .g.mdoff4 {
		 width: calc(100% - 4 * 10%);
		 margin-left: auto;
		 margin-right: auto;
	}
	 .g .md1 {
		 grid-column-start: span 1;
	}
	 .g .md2 {
		 grid-column-start: span 2;
	}
	 .g .md3 {
		 grid-column-start: span 3;
	}
	 .g .md4 {
		 grid-column-start: span 4;
	}
	 .g .md5 {
		 grid-column-start: span 5;
	}
	 .g .md6 {
		 grid-column-start: span 6;
	}
	 .g .md7 {
		 grid-column-start: span 7;
	}
	 .g .md8 {
		 grid-column-start: span 8;
	}
	 .g .md9 {
		 grid-column-start: span 9;
	}
	 .g .md10 {
		 grid-column-start: span 10;
	}
	 .g .md11 {
		 grid-column-start: span 11;
	}
	 .g .md12 {
		 grid-column-start: span 12;
	}
}
/* ========================================================================== 
// Media query for medium screens (< 991px) 
========================================================================== */
/* ========================================================================== 
// Media query for medium screens (768px - 991px) 
========================================================================== */
 @media (min-width: 768px) and (max-width: 991px) {
	 .inner {
		 width: 100%;
	}
	 .g.sm2 {
		 grid-template-columns: var(--g2);
	}
	 .g.sm3 {
		 grid-template-columns: var(--g3);
	}
	 .g.sm4 {
		 grid-template-columns: var(--g4);
	}
	 .g.sm5 {
		 grid-template-columns: var(--g5);
	}
	 .g.sm6 {
		 grid-template-columns: var(--g6);
	}
	 .g.sm2 > *, .g.sm3 > *, .g.sm4 > *, .g.sm5 > *, .g.sm6 > * {
		 grid-column-start: auto;
	}
	 .g .sm1 {
		 grid-column-start: span 1;
	}
	 .g .sm2 {
		 grid-column-start: span 2;
	}
	 .g .sm3 {
		 grid-column-start: span 3;
	}
	 .g .sm4 {
		 grid-column-start: span 4;
	}
	 .g .sm5 {
		 grid-column-start: span 5;
	}
	 .g .sm6 {
		 grid-column-start: span 6;
	}
	 .g .sm7 {
		 grid-column-start: span 7;
	}
	 .g .sm8 {
		 grid-column-start: span 8;
	}
	 .g .sm9 {
		 grid-column-start: span 9;
	}
	 .g .sm10 {
		 grid-column-start: span 10;
	}
	 .g .sm11 {
		 grid-column-start: span 11;
	}
	 .g .sm12 {
		 grid-column-start: span 12;
	}
	 .hsm {
		 display: none !important;
	}
}
/* ========================================================================== 
// Media query for small screens (< 768px) 
========================================================================== */
 @media all and (max-width: 767px) {
	 .hxs {
		 display: none !important;
	}
	 .g.xs2 {
		 grid-template-columns: var(--g2);
	}
	 .g.xs3 {
		 grid-template-columns: var(--g3);
	}
	 .g.xs4 {
		 grid-template-columns: var(--g4);
	}
	 .g.xs5 {
		 grid-template-columns: var(--g5);
	}
	 .g.xs6 {
		 grid-template-columns: var(--g6);
	}
	 .g.xs2 > *, .g.xs3 > *, .g.xs4 > *, .g.xs5 > *, .g.xs6 > * {
		 grid-column-start: auto;
	}
	 .g .xs1 {
		 grid-column-start: span 1;
	}
	 .g .xs2 {
		 grid-column-start: span 2;
	}
	 .g .xs3 {
		 grid-column-start: span 3;
	}
	 .g .xs4 {
		 grid-column-start: span 4;
	}
	 .g .xs5 {
		 grid-column-start: span 5;
	}
	 .g .xs6 {
		 grid-column-start: span 6;
	}
	 .g .xs7 {
		 grid-column-start: span 7;
	}
	 .g .xs8 {
		 grid-column-start: span 8;
	}
	 .g .xs9 {
		 grid-column-start: span 9;
	}
	 .g .xs10 {
		 grid-column-start: span 10;
	}
	 .g .xs11 {
		 grid-column-start: span 11;
	}
	 .g .xs12 {
		 grid-column-start: span 12;
	}
	 .g.cg2, .g.cg3, .g.cg4, .g.cg5, .g.cg6 {
		 column-gap: 15px;
	}
	 .invert-xs {
		 grid-row: 1;
	}
}