body {
   margin      :  0px !important;
   padding     :  0px !important;
   overflow-x  :  hidden;
}
:root{
   --gutter-x: 30px;  /* bootstrap-ish default */
   --gutter-y: 0px;
}

/* row */
.row{
   display: flex;
   flex-wrap: wrap;
   margin-left: calc(var(--gutter-x) / -2);
   margin-right: calc(var(--gutter-x) / -2);
   margin-top: calc(var(--gutter-y) * -1);
}
.row > *{
   box-sizing: border-box;
   flex-shrink: 0;
   max-width: 100%;
   padding-left: calc(var(--gutter-x) / 2);
   padding-right: calc(var(--gutter-x) / 2);
   margin-top: var(--gutter-y);
}

/* equal-width columns */
.col{
   flex: 1 0 0%;
}

/* fixed 12-col widths */
.col-1{flex: 0 0 auto; width: 8.333333%;}
.col-2{flex: 0 0 auto; width: 16.666667%;}
.col-3{flex: 0 0 auto; width: 25%;}
.col-4{flex: 0 0 auto; width: 33.333333%;}
.col-5{flex: 0 0 auto; width: 41.666667%;}
.col-6{flex: 0 0 auto; width: 50%;}
.col-7{flex: 0 0 auto; width: 58.333333%;}
.col-8{flex: 0 0 auto; width: 66.666667%;}
.col-9{flex: 0 0 auto; width: 75%;}
.col-10{flex: 0 0 auto; width: 83.333333%;}
.col-11{flex: 0 0 auto; width: 91.666667%;}
.col-12{flex: 0 0 auto; width: 100%;}

/* alignment helpers (subset) */
.justify-content-start{justify-content:flex-start;}
.justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;}
.justify-content-between{justify-content:space-between;}
.justify-content-around{justify-content:space-around;}

.align-items-start{align-items:flex-start;}
.align-items-center{align-items:center;}
.align-items-end{align-items:flex-end;}
.align-items-stretch{align-items:stretch;}

.align-self-start{align-self:flex-start;}
.align-self-center{align-self:center;}
.align-self-end{align-self:flex-end;}
.align-self-stretch{align-self:stretch;}

/* responsive breakpoints (Bootstrap-ish: sm 576, md 768, lg 992, xl 1200) */
@media(min-width:576px){
   .col-sm-1{flex:0 0 auto;width:8.333333%;}
   .col-sm-2{flex:0 0 auto;width:16.666667%;}
   .col-sm-3{flex:0 0 auto;width:25%;}
   .col-sm-4{flex:0 0 auto;width:33.333333%;}
   .col-sm-5{flex:0 0 auto;width:41.666667%;}
   .col-sm-6{flex:0 0 auto;width:50%;}
   .col-sm-7{flex:0 0 auto;width:58.333333%;}
   .col-sm-8{flex:0 0 auto;width:66.666667%;}
   .col-sm-9{flex:0 0 auto;width:75%;}
   .col-sm-10{flex:0 0 auto;width:83.333333%;}
   .col-sm-11{flex:0 0 auto;width:91.666667%;}
   .col-sm-12{flex:0 0 auto;width:100%;}
}
@media(min-width:768px){
   .col-md-1{flex:0 0 auto;width:8.333333%;}
   .col-md-2{flex:0 0 auto;width:16.666667%;}
   .col-md-3{flex:0 0 auto;width:25%;}
   .col-md-4{flex:0 0 auto;width:33.333333%;}
   .col-md-5{flex:0 0 auto;width:41.666667%;}
   .col-md-6{flex:0 0 auto;width:50%;}
   .col-md-7{flex:0 0 auto;width:58.333333%;}
   .col-md-8{flex:0 0 auto;width:66.666667%;}
   .col-md-9{flex:0 0 auto;width:75%;}
   .col-md-10{flex:0 0 auto;width:83.333333%;}
   .col-md-11{flex:0 0 auto;width:91.666667%;}
   .col-md-12{flex:0 0 auto;width:100%;}
}
@media(min-width:992px){
   .col-lg-1{flex:0 0 auto;width:8.333333%;}
   .col-lg-2{flex:0 0 auto;width:16.666667%;}
   .col-lg-3{flex:0 0 auto;width:25%;}
   .col-lg-4{flex:0 0 auto;width:33.333333%;}
   .col-lg-5{flex:0 0 auto;width:41.666667%;}
   .col-lg-6{flex:0 0 auto;width:50%;}
   .col-lg-7{flex:0 0 auto;width:58.333333%;}
   .col-lg-8{flex:0 0 auto;width:66.666667%;}
   .col-lg-9{flex:0 0 auto;width:75%;}
   .col-lg-10{flex:0 0 auto;width:83.333333%;}
   .col-lg-11{flex:0 0 auto;width:91.666667%;}
   .col-lg-12{flex:0 0 auto;width:100%;}
}
@media(min-width:1200px){
   .col-xl-1{flex:0 0 auto;width:8.333333%;}
   .col-xl-2{flex:0 0 auto;width:16.666667%;}
   .col-xl-3{flex:0 0 auto;width:25%;}
   .col-xl-4{flex:0 0 auto;width:33.333333%;}
   .col-xl-5{flex:0 0 auto;width:41.666667%;}
   .col-xl-6{flex:0 0 auto;width:50%;}
   .col-xl-7{flex:0 0 auto;width:58.333333%;}
   .col-xl-8{flex:0 0 auto;width:66.666667%;}
   .col-xl-9{flex:0 0 auto;width:75%;}
   .col-xl-10{flex:0 0 auto;width:83.333333%;}
   .col-xl-11{flex:0 0 auto;width:91.666667%;}
   .col-xl-12{flex:0 0 auto;width:100%;}
}