.grid{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}

.grid.ten{
	grid-template-columns: repeat(10,);
}

.grid.gap{
	--grid-gap: 1em;
	grid-gap:var(--grid-gap);
	gap:var(--grid-gap);
}




/* extra small */
@media (min-width: 0){
	.gap.xs-large{ --grid-gap:2em;}
	.gap.xs-medium{--grid-gap: 1em;}
	.gap.xs-small{ --grid-gap:0.5em;}

	.col-xs-0{ display: none; }
	.col-xs-1{ grid-column: span 1; }
	.col-xs-2{ grid-column: span 2; }
	.col-xs-1{ grid-column: span 1; }
	.col-xs-3{ grid-column: span 3; }
	.col-xs-4{ grid-column: span 4; }
	.col-xs-5{ grid-column: span 5; }
	.col-xs-6{ grid-column: span 6; }
	.col-xs-7{ grid-column: span 7; }
	.col-xs-8{ grid-column: span 8; }
	.col-xs-9{ grid-column: span 9; }
	.col-xs-10{ grid-column: span 10;}
	.col-xs-11{ grid-column: span 11;}
	.col-xs-12{ grid-column: span 12;}
}
/* small */
@media (min-width: 380px){
	.gap.sm-large{ --grid-gap:2em;}
	.gap.sm-medium{--grid-gap: 1em;}
	.gap.sm-small{ --grid-gap:0.5em;}

	.col-sm-0{ display: none; }
	.col-sm-1{ grid-column: span 1; }
	.col-sm-2{ grid-column: span 2; }
	.col-sm-1{ grid-column: span 1; }
	.col-sm-3{ grid-column: span 3; }
	.col-sm-4{ grid-column: span 4; }
	.col-sm-5{ grid-column: span 5; }
	.col-sm-6{ grid-column: span 6; }
	.col-sm-7{ grid-column: span 7; }
	.col-sm-8{ grid-column: span 8; }
	.col-sm-9{ grid-column: span 9; }
	.col-sm-10{ grid-column: span 10;}
	.col-sm-11{ grid-column: span 11;}
	.col-sm-12{ grid-column: span 12;}
}
/* medium */
@media (min-width: 550px){
	.gap.md-large{ --grid-gap:2em;}
	.gap.md-medium{--grid-gap: 1em;}
	.gap.md-small{ --grid-gap:0.5em;}

	.col-md-0{ display: none; }
	.col-md-1{ grid-column: span 1; }
	.col-md-2{ grid-column: span 2; }
	.col-md-3{ grid-column: span 3; }
	.col-md-4{ grid-column: span 4; }
	.col-md-5{ grid-column: span 5; }
	.col-md-6{ grid-column: span 6; }
	.col-md-7{ grid-column: span 7; }
	.col-md-8{ grid-column: span 8; }
	.col-md-9{ grid-column: span 9; }
	.col-md-10{ grid-column: span 10;}
	.col-md-11{ grid-column: span 11;}
	.col-md-12{ grid-column: span 12;}
}
/* large */
@media (min-width: 900px){
	.gap.lg-large{ --grid-gap:2em;}
	.gap.lg-medium{--grid-gap: 1em;}
	.gap.lg-small{ --grid-gap:0.5em;}

	.col-lg-0{ display: none; }
	.col-lg-1{ grid-column: span 1; }
	.col-lg-2{ grid-column: span 2; }
	.col-lg-3{ grid-column: span 3; }
	.col-lg-4{ grid-column: span 4; }
	.col-lg-5{ grid-column: span 5; }
	.col-lg-6{ grid-column: span 6; }
	.col-lg-7{ grid-column: span 7; }
	.col-lg-8{ grid-column: span 8; }
	.col-lg-9{ grid-column: span 9; }
	.col-lg-10{ grid-column: span 10;}
	.col-lg-11{ grid-column: span 11;}
	.col-lg-12{ grid-column: span 12;}
}
/* extra large */
@media (min-width: 1200px){
	.gap.xl-large{ --grid-gap:2em;}
	.gap.xl-medium{--grid-gap: 1em;}
	.gap.xl-small{ --grid-gap:0.5em;}

	.col-xl-0{ display: none; }
	.col-xl-1{ grid-column: span 1; }
	.col-xl-2{ grid-column: span 2; }
	.col-xl-3{ grid-column: span 3; }
	.col-xl-4{ grid-column: span 4; }
	.col-xl-5{ grid-column: span 5; }
	.col-xl-6{ grid-column: span 6; }
	.col-xl-7{ grid-column: span 7; }
	.col-xl-8{ grid-column: span 8; }
	.col-xl-9{ grid-column: span 9; }
	.col-xl-10{ grid-column: span 10;}
	.col-xl-11{ grid-column: span 11;}
	.col-xl-12{ grid-column: span 12;}
}