:root {
--colWidth: 75px;
--colSpace: 20px; 
--index: 12;
--boxPadding: 90px;

}
.box {width: 100%; padding-top: var(--boxPadding); padding-bottom: var(--boxPadding); border: 0px solid green; box-sizing: border-box; }

.pb-0 {padding-bottom: 0px!important;}
.pt-0 {padding-top: 0px!important;}
.pb-50 {padding-bottom: 50px!important;}
.pt-25 {padding-top: 25px!important;}
.pt-10 {padding-top: 10px!important;}
.pt-50 {padding-top: 50px!important;}
.pt-100 {padding-top: 100px!important;}
.pt-125 {padding-top: 125px!important;}
.pb-10 {padding-bottom: 10px!important;}

.py-50 {padding-bottom: 50px!important; padding-top: 50px!important;}
.py-25 {padding-bottom: 25px!important; padding-top: 25px!important;}

.py-0 {padding-bottom: 0px!important; padding-top: 0px!important;}

.my-0 {margin-bottom: 0px!important; margin-top: 0px!important;}

.mt-80 {margin-top: 80px!important;}
.mt-100 {margin-top: 100px!important;}
.mb-0 {margin-bottom: 0px!important;}
.mb-50 {margin-bottom: 50px!important;}
.mt-125 {margin-top: 125px!important;}
.lh-0 {line-height: 0px!important;}

.row {position: relative; --index: 12; width: calc(var(--colWidth) * var(--index) + var(--colSpace) * (var(--index))); margin: 0 auto; border: 0px solid red; box-sizing: border-box;}

.cols {--index: 1; width: calc(var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1)); margin-left: 10px; margin-right: 10px; float: left; margin-top: 10px; margin-bottom: 10px; box-sizing: border-box; border: 0px solid yellow;}

.cols .cols:nth-of-type(1) {margin-left: 0px;}
.cols .cols:last-of-type {margin-right: 0px;}

/* p {max-width: calc(var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1));}*/
.xl-1x2 {--index: 1.5;}
.xl-4x2 {--index: 4.5;}

.xl-2 {--index: 2;}
.xl-3 {--index: 3;}
.xl-4 {--index: 4;}
.xl-5 {--index: 5;}
.xl-6 {--index: 6;}
.xl-7 {--index: 7;}
.xl-8 {--index: 8;}
.xl-9 {--index: 9;}
.xl-10 {--index: 10;}
.xl-11 {--index: 11;}
.xl-12 {--index: 12;}
.width {--index: 12; width: calc(var(--colWidth) * var(--index) + var(--colSpace) * (var(--index)));}
.no_margin_right {margin-left: calc((100vw - (var(--colWidth) * var(--index) + var(--colSpace) * (var(--index)))) / 2); width: auto;}

.fullwidth { width: 100%;}
/*
.nospace_both {width: 100%; box-sizing: border-box; padding-left: calc((100% - (var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1)))/2); padding-right: calc((100% - (var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1)))/2);}
.nospace_right {width: 100%; box-sizing: border-box; padding-left: calc((100% - (var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1)))/2); padding-right: 0;}

.fullwidth_right {}
*/

.xl-1x2 {--index: 1.5; width: calc(var(--colWidth) * var(--index) + var(--colSpace) * (var(--index) - 1))};
.nopadding {padding-top: 0px; padding-bottom: 0px;}
.nopadding_bottom {padding-bottom: 0px;}
.nomargin {margin-top: 0px; margin-bottom: 0px;}


/* Clearing */
 .row:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
 .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
 .row:after, .clearfix:after { clear: both; }
 .row, .clearfix { zoom: 1; }
 
 @media only screen and (min-width: 1024px) and (max-width: 1400px) {
 :root {
 --colWidth: 60px;
 --colSpace: 20px; 
--boxPadding: 40px;
 }
 
 .cols {margin-left: 10px; margin-right: 10px;}

 .l-0 {display: none;}
 .l-1x2 {--index: 1.5;}
 .l-2 {--index: 2;}
 .l-3 {--index: 3;}
 .l-3x2 {--index: 3.5;}
 .l-4 {--index: 4;}
 .l-5 {--index: 5;}
 .l-6 {--index: 6;}
 .l-7 {--index: 7;}
 .l-8 {--index: 8;}
 .l-9 {--index: 9;}
 .l-10 {--index: 10;}
 .l-11 {--index: 11;}
 .l-12 {--index: 12;}
 
 
 }
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
        --colWidth: 40px;
        --colSpace: 20px; 
        --boxPadding: 30px;
    }
    
    .cols {margin-left: 10px; margin-right: 10px; float: left; }
     
     .t-0 {display: none;}
     .t-2 {--index: 2;}
     .t-3x2 {--index: 3.5;}
       .t-3 {--index: 3;}
       .t-4 {--index: 4;}
       .t-5 {--index: 5;}
       .t-6 {--index: 6;}
       .t-7 {--index: 7;}
       .t-8 {--index: 8;}
       .t-9 {--index: 9;}
       .t-10 {--index: 10;}
       .t-11 {--index: 11;}
       .t-12 {--index: 12;}
 }
 
 @media only screen and (max-width: 767px) {
    :root {
     --colSpace: calc(28% / 11); 
     --colWidth: 6%;
     --index: 12;
     --boxPadding: 20px;
 }
    .m-0 {display: none;}

 .row {width: 90vw; border: 0px solid red; box-sizing: border-box;}
 .cols { border: 0px solid green;  text-align: left; width: 100%; margin-left: 0px; margin-right: 0px; }
 }