/* FLEX CLASSES */
[class*="flex-"] { display: flex; }

/* GRID CLASSES */
[class*="grid-"] { display: grid; }

[class*="gridcol1"]  { display: grid; grid-template-columns: 1fr; }
[class*="gridcol2"]  { display: grid; grid-template-columns: 1fr 1fr; }
[class*="gridcol3"]  { display: grid; grid-template-columns: 1fr 1fr 1fr; }
[class*="gridcol4"]  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
[class*="gridcol5"]  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol6"]  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol7"]  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol8"]  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol9"]  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol10"] { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol11"] { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridcol12"] { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

[class*="gridrow1"]  { display: grid; grid-template-rows: 1fr; }
[class*="gridrow2"]  { display: grid; grid-template-rows: 1fr 1fr; }
[class*="gridrow3"]  { display: grid; grid-template-rows: 1fr 1fr 1fr; }
[class*="gridrow4"]  { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr; }
[class*="gridrow5"]  { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow6"]  { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow7"]  { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow8"]  { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow9"]  { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow10"] { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow11"] { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
[class*="gridrow12"] { display: grid; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }

[class*="gap4"]  { gap:4px;  }
[class*="gap5"]  { gap:5px;  }
[class*="gap6"]  { gap:6px;  }
[class*="gap7"]  { gap:7px;  }
[class*="gap8"]  { gap:8px;  }
[class*="gap9"]  { gap:9px;  }
[class*="gap10"] { gap:10px; }
[class*="gap11"] { gap:11px; }
[class*="gap12"] { gap:12px; }

.halign-center { justify-content: center; justify-items: center; }
.halign-start { justify-content: flex-start; justify-items: flex-start; }
.halign-end  { justify-content: flex-end; justify-items: flex-end; }
.valign-center { align-items: center; }
.valign-start { align-items: flex-start; }
.valign-end  { align-items: flex-end; }

/* SPAN */
.spanh1  { flex:1;  grid-column: span 1; }
.spanh2  { flex:2;  grid-column: span 2; }
.spanh3  { flex:3;  grid-column: span 3; }
.spanh4  { flex:4;  grid-column: span 4; }
.spanh5  { flex:5;  grid-column: span 5; }
.spanh6  { flex:6;  grid-column: span 6; }
.spanh7  { flex:7;  grid-column: span 7; }
.spanh8  { flex:8;  grid-column: span 8; }
.spanh9  { flex:9;  grid-column: span 9; }
.spanh10 { flex:10; grid-column: span 10; }
.spanh11 { flex:11; grid-column: span 11; }
.spanh12 { flex:12; grid-column: span 12; }

.spanv1  { flex:1;  grid-row: span 1; }
.spanv2  { flex:2;  grid-row: span 2; }
.spanv3  { flex:3;  grid-row: span 3; }
.spanv4  { flex:4;  grid-row: span 4; }
.spanv5  { flex:5;  grid-row: span 5; }
.spanv6  { flex:6;  grid-row: span 6; }
.spanv7  { flex:7;  grid-row: span 7; }
.spanv8  { flex:8;  grid-row: span 8; }
.spanv9  { flex:9;  grid-row: span 9; }
.spanv10 { flex:10; grid-row: span 10; }
.spanv11 { flex:11; grid-row: span 11; }
.spanv12 { flex:12; grid-row: span 12; }