:root {
  --gutter: 20px;
}

@media (max-width: 575px) {
  :root {
    --container-pad: 20px;
  }
}

@media (min-width: 576px) {
  :root {
    --container-pad: 20px;
  }
}

@media (min-width: 768px) {
  :root {
    --container-pad: 30px;
  }
}

@media (min-width: 992px) {
  :root {
    --container-pad: 40px;
  }
}

@media (min-width: 1200px) {
  :root {
    --container-pad: 60px;
  }
}

@media (min-width: 1400px) {
  :root {
    --container-pad: 80px;
  }
}

.full-width-padding{
  padding: var(--container-pad);
  box-sizing: border-box;
  width: 100%;
}

/* Row behavior (flex, with negative margins to offset inner padding) */
.row-16{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}

/* Base columns (mobile) */
.col-16-1  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 6.25%;   max-width: 6.25%;  }
.col-16-2  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 12.5%;   max-width: 12.5%;  }
.col-16-3  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 18.75%;  max-width: 18.75%; }
.col-16-4  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 25%;     max-width: 25%;    }
.col-16-5  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 31.25%;  max-width: 31.25%; }
.col-16-6  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 37.5%;   max-width: 37.5%;  }
.col-16-7  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 43.75%;  max-width: 43.75%; }
.col-16-8  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 50%;     max-width: 50%;    }
.col-16-9  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 56.25%;  max-width: 56.25%; }
.col-16-10 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 62.5%;   max-width: 62.5%;  }
.col-16-11 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 68.75%;  max-width: 68.75%; }
.col-16-12 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 75%;     max-width: 75%;    }
.col-16-13 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 81.25%;  max-width: 81.25%; }
.col-16-14 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 87.5%;   max-width: 87.5%;  }
.col-16-15 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 93.75%;  max-width: 93.75%; }
.col-16-16 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 100%;    max-width: 100%;   }

/* Responsive variants */
/* sm >= 576px */
@media (min-width: 576px){
  .col-16-sm-1  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 6.25%;   max-width: 6.25%;  }
  .col-16-sm-2  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 12.5%;   max-width: 12.5%;  }
  .col-16-sm-3  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 18.75%;  max-width: 18.75%; }
  .col-16-sm-4  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 25%;     max-width: 25%;    }
  .col-16-sm-5  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 31.25%;  max-width: 31.25%; }
  .col-16-sm-6  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 37.5%;   max-width: 37.5%;  }
  .col-16-sm-7  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 43.75%;  max-width: 43.75%; }
  .col-16-sm-8  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 50%;     max-width: 50%;    }
  .col-16-sm-9  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 56.25%;  max-width: 56.25%; }
  .col-16-sm-10 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 62.5%;   max-width: 62.5%;  }
  .col-16-sm-11 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 68.75%;  max-width: 68.75%; }
  .col-16-sm-12 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 75%;     max-width: 75%;    }
  .col-16-sm-13 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 81.25%;  max-width: 81.25%; }
  .col-16-sm-14 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 87.5%;   max-width: 87.5%;  }
  .col-16-sm-15 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 93.75%;  max-width: 93.75%; }
  .col-16-sm-16 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 100%;    max-width: 100%;   }
}

/* md >= 768px */
@media (min-width: 768px){
  .col-16-md-1  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 6.25%;   max-width: 6.25%;  }
  .col-16-md-2  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 12.5%;   max-width: 12.5%;  }
  .col-16-md-3  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 18.75%;  max-width: 18.75%; }
  .col-16-md-4  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 25%;     max-width: 25%;    }
  .col-16-md-5  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 31.25%;  max-width: 31.25%; }
  .col-16-md-6  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 37.5%;   max-width: 37.5%;  }
  .col-16-md-7  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 43.75%;  max-width: 43.75%; }
  .col-16-md-8  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 50%;     max-width: 50%;    }
  .col-16-md-9  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 56.25%;  max-width: 56.25%; }
  .col-16-md-10 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 62.5%;   max-width: 62.5%;  }
  .col-16-md-11 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 68.75%;  max-width: 68.75%; }
  .col-16-md-12 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 75%;     max-width: 75%;    }
  .col-16-md-13 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 81.25%;  max-width: 81.25%; }
  .col-16-md-14 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 87.5%;   max-width: 87.5%;  }
  .col-16-md-15 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 93.75%;  max-width: 93.75%; }
  .col-16-md-16 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 100%;    max-width: 100%;   }
}

/* lg >= 992px */
@media (min-width: 992px){
  .col-16-lg-1  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 6.25%;   max-width: 6.25%;  }
  .col-16-lg-2  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 12.5%;   max-width: 12.5%;  }
  .col-16-lg-3  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 18.75%;  max-width: 18.75%; }
  .col-16-lg-4  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 25%;     max-width: 25%;    }
  .col-16-lg-5  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 31.25%;  max-width: 31.25%; }
  .col-16-lg-6  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 37.5%;   max-width: 37.5%;  }
  .col-16-lg-7  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 43.75%;  max-width: 43.75%; }
  .col-16-lg-8  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 50%;     max-width: 50%;    }
  .col-16-lg-9  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 56.25%;  max-width: 56.25%; }
  .col-16-lg-10 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 62.5%;   max-width: 62.5%;  }
  .col-16-lg-11 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 68.75%;  max-width: 68.75%; }
  .col-16-lg-12 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 75%;     max-width: 75%;    }
  .col-16-lg-13 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 81.25%;  max-width: 81.25%; }
  .col-16-lg-14 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 87.5%;   max-width: 87.5%;  }
  .col-16-lg-15 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 93.75%;  max-width: 93.75%; }
  .col-16-lg-16 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 100%;    max-width: 100%;   }
}

/* xl >= 1200px */
@media (min-width: 1200px){
  .col-16-xl-1  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 6.25%;   max-width: 6.25%;  }
  .col-16-xl-2  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 12.5%;   max-width: 12.5%;  }
  .col-16-xl-3  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 18.75%;  max-width: 18.75%; }
  .col-16-xl-4  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 25%;     max-width: 25%;    }
  .col-16-xl-5  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 31.25%;  max-width: 31.25%; }
  .col-16-xl-6  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 37.5%;   max-width: 37.5%;  }
  .col-16-xl-7  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 43.75%;  max-width: 43.75%; }
  .col-16-xl-8  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 50%;     max-width: 50%;    }
  .col-16-xl-9  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 56.25%;  max-width: 56.25%; }
  .col-16-xl-10 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 62.5%;   max-width: 62.5%;  }
  .col-16-xl-11 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 68.75%;  max-width: 68.75%; }
  .col-16-xl-12 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 75%;     max-width: 75%;    }
  .col-16-xl-13 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 81.25%;  max-width: 81.25%; }
  .col-16-xl-14 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 87.5%;   max-width: 87.5%;  }
  .col-16-xl-15 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 93.75%;  max-width: 93.75%; }
  .col-16-xl-16 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 100%;    max-width: 100%;   }
}

/* xxl >= 1400px */
@media (min-width: 1400px){
  .col-16-xxl-1  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 6.25%;   max-width: 6.25%;  }
  .col-16-xxl-2  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 12.5%;   max-width: 12.5%;  }
  .col-16-xxl-3  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 18.75%;  max-width: 18.75%; }
  .col-16-xxl-4  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 25%;     max-width: 25%;    }
  .col-16-xxl-5  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 31.25%;  max-width: 31.25%; }
  .col-16-xxl-6  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 37.5%;   max-width: 37.5%;  }
  .col-16-xxl-7  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 43.75%;  max-width: 43.75%; }
  .col-16-xxl-8  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 50%;     max-width: 50%;    }
  .col-16-xxl-9  { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 56.25%;  max-width: 56.25%; }
  .col-16-xxl-10 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 62.5%;   max-width: 62.5%;  }
  .col-16-xxl-11 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 68.75%;  max-width: 68.75%; }
  .col-16-xxl-12 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 75%;     max-width: 75%;    }
  .col-16-xxl-13 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 81.25%;  max-width: 81.25%; }
  .col-16-xxl-14 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 87.5%;   max-width: 87.5%;  }
  .col-16-xxl-15 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 93.75%;  max-width: 93.75%; }
  .col-16-xxl-16 { padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); flex: 0 0 100%;    max-width: 100%;   }
}

/* no-gutter helper to remove inner padding */
.no-gutter > .col-16-1,
.no-gutter > .col-16-2,
.no-gutter > .col-16-3,
.no-gutter > .col-16-4,
.no-gutter > .col-16-5,
.no-gutter > .col-16-6,
.no-gutter > .col-16-7,
.no-gutter > .col-16-8,
.no-gutter > .col-16-9,
.no-gutter > .col-16-10,
.no-gutter > .col-16-11,
.no-gutter > .col-16-12,
.no-gutter > .col-16-13,
.no-gutter > .col-16-14,
.no-gutter > .col-16-15,
.no-gutter > .col-16-16{
  padding-left: 0;
  padding-right: 0;
}

:root{
  --columns: 16;
}

/* Offsets (base/mobile) */
.offset-16-1  { margin-left: calc(100% * 1  / var(--columns)); }
.offset-16-2  { margin-left: calc(100% * 2  / var(--columns)); }
.offset-16-3  { margin-left: calc(100% * 3  / var(--columns)); }
.offset-16-4  { margin-left: calc(100% * 4  / var(--columns)); }
.offset-16-5  { margin-left: calc(100% * 5  / var(--columns)); }
.offset-16-6  { margin-left: calc(100% * 6  / var(--columns)); }
.offset-16-7  { margin-left: calc(100% * 7  / var(--columns)); }
.offset-16-8  { margin-left: calc(100% * 8  / var(--columns)); }
.offset-16-9  { margin-left: calc(100% * 9  / var(--columns)); }
.offset-16-10 { margin-left: calc(100% * 10 / var(--columns)); }
.offset-16-11 { margin-left: calc(100% * 11 / var(--columns)); }
.offset-16-12 { margin-left: calc(100% * 12 / var(--columns)); }
.offset-16-13 { margin-left: calc(100% * 13 / var(--columns)); }
.offset-16-14 { margin-left: calc(100% * 14 / var(--columns)); }
.offset-16-15 { margin-left: calc(100% * 15 / var(--columns)); }

/* sm >= 576px */
@media (min-width: 576px){
  .offset-16-sm-1  { margin-left: calc(100% * 1  / var(--columns)); }
  .offset-16-sm-2  { margin-left: calc(100% * 2  / var(--columns)); }
  .offset-16-sm-3  { margin-left: calc(100% * 3  / var(--columns)); }
  .offset-16-sm-4  { margin-left: calc(100% * 4  / var(--columns)); }
  .offset-16-sm-5  { margin-left: calc(100% * 5  / var(--columns)); }
  .offset-16-sm-6  { margin-left: calc(100% * 6  / var(--columns)); }
  .offset-16-sm-7  { margin-left: calc(100% * 7  / var(--columns)); }
  .offset-16-sm-8  { margin-left: calc(100% * 8  / var(--columns)); }
  .offset-16-sm-9  { margin-left: calc(100% * 9  / var(--columns)); }
  .offset-16-sm-10 { margin-left: calc(100% * 10 / var(--columns)); }
  .offset-16-sm-11 { margin-left: calc(100% * 11 / var(--columns)); }
  .offset-16-sm-12 { margin-left: calc(100% * 12 / var(--columns)); }
  .offset-16-sm-13 { margin-left: calc(100% * 13 / var(--columns)); }
  .offset-16-sm-14 { margin-left: calc(100% * 14 / var(--columns)); }
  .offset-16-sm-15 { margin-left: calc(100% * 15 / var(--columns)); }
}

/* md >= 768px */
@media (min-width: 768px){
  .offset-16-md-1  { margin-left: calc(100% * 1  / var(--columns)); }
  .offset-16-md-2  { margin-left: calc(100% * 2  / var(--columns)); }
  .offset-16-md-3  { margin-left: calc(100% * 3  / var(--columns)); }
  .offset-16-md-4  { margin-left: calc(100% * 4  / var(--columns)); }
  .offset-16-md-5  { margin-left: calc(100% * 5  / var(--columns)); }
  .offset-16-md-6  { margin-left: calc(100% * 6  / var(--columns)); }
  .offset-16-md-7  { margin-left: calc(100% * 7  / var(--columns)); }
  .offset-16-md-8  { margin-left: calc(100% * 8  / var(--columns)); }
  .offset-16-md-9  { margin-left: calc(100% * 9  / var(--columns)); }
  .offset-16-md-10 { margin-left: calc(100% * 10 / var(--columns)); }
  .offset-16-md-11 { margin-left: calc(100% * 11 / var(--columns)); }
  .offset-16-md-12 { margin-left: calc(100% * 12 / var(--columns)); }
  .offset-16-md-13 { margin-left: calc(100% * 13 / var(--columns)); }
  .offset-16-md-14 { margin-left: calc(100% * 14 / var(--columns)); }
  .offset-16-md-15 { margin-left: calc(100% * 15 / var(--columns)); }
}

/* lg >= 992px */
@media (min-width: 992px){
  .offset-16-lg-1  { margin-left: calc(100% * 1  / var(--columns)); }
  .offset-16-lg-2  { margin-left: calc(100% * 2  / var(--columns)); }
  .offset-16-lg-3  { margin-left: calc(100% * 3  / var(--columns)); }
  .offset-16-lg-4  { margin-left: calc(100% * 4  / var(--columns)); }
  .offset-16-lg-5  { margin-left: calc(100% * 5  / var(--columns)); }
  .offset-16-lg-6  { margin-left: calc(100% * 6  / var(--columns)); }
  .offset-16-lg-7  { margin-left: calc(100% * 7  / var(--columns)); }
  .offset-16-lg-8  { margin-left: calc(100% * 8  / var(--columns)); }
  .offset-16-lg-9  { margin-left: calc(100% * 9  / var(--columns)); }
  .offset-16-lg-10 { margin-left: calc(100% * 10 / var(--columns)); }
  .offset-16-lg-11 { margin-left: calc(100% * 11 / var(--columns)); }
  .offset-16-lg-12 { margin-left: calc(100% * 12 / var(--columns)); }
  .offset-16-lg-13 { margin-left: calc(100% * 13 / var(--columns)); }
  .offset-16-lg-14 { margin-left: calc(100% * 14 / var(--columns)); }
  .offset-16-lg-15 { margin-left: calc(100% * 15 / var(--columns)); }
}

/* xl >= 1200px */
@media (min-width: 1200px){
  .offset-16-xl-1  { margin-left: calc(100% * 1  / var(--columns)); }
  .offset-16-xl-2  { margin-left: calc(100% * 2  / var(--columns)); }
  .offset-16-xl-3  { margin-left: calc(100% * 3  / var(--columns)); }
  .offset-16-xl-4  { margin-left: calc(100% * 4  / var(--columns)); }
  .offset-16-xl-5  { margin-left: calc(100% * 5  / var(--columns)); }
  .offset-16-xl-6  { margin-left: calc(100% * 6  / var(--columns)); }
  .offset-16-xl-7  { margin-left: calc(100% * 7  / var(--columns)); }
  .offset-16-xl-8  { margin-left: calc(100% * 8  / var(--columns)); }
  .offset-16-xl-9  { margin-left: calc(100% * 9  / var(--columns)); }
  .offset-16-xl-10 { margin-left: calc(100% * 10 / var(--columns)); }
  .offset-16-xl-11 { margin-left: calc(100% * 11 / var(--columns)); }
  .offset-16-xl-12 { margin-left: calc(100% * 12 / var(--columns)); }
  .offset-16-xl-13 { margin-left: calc(100% * 13 / var(--columns)); }
  .offset-16-xl-14 { margin-left: calc(100% * 14 / var(--columns)); }
  .offset-16-xl-15 { margin-left: calc(100% * 15 / var(--columns)); }
}

/* xxl >= 1400px */
@media (min-width: 1400px){
  .offset-16-xxl-1  { margin-left: calc(100% * 1  / var(--columns)); }
  .offset-16-xxl-2  { margin-left: calc(100% * 2  / var(--columns)); }
  .offset-16-xxl-3  { margin-left: calc(100% * 3  / var(--columns)); }
  .offset-16-xxl-4  { margin-left: calc(100% * 4  / var(--columns)); }
  .offset-16-xxl-5  { margin-left: calc(100% * 5  / var(--columns)); }
  .offset-16-xxl-6  { margin-left: calc(100% * 6  / var(--columns)); }
  .offset-16-xxl-7  { margin-left: calc(100% * 7  / var(--columns)); }
  .offset-16-xxl-8  { margin-left: calc(100% * 8  / var(--columns)); }
  .offset-16-xxl-9  { margin-left: calc(100% * 9  / var(--columns)); }
  .offset-16-xxl-10 { margin-left: calc(100% * 10 / var(--columns)); }
  .offset-16-xxl-11 { margin-left: calc(100% * 11 / var(--columns)); }
  .offset-16-xxl-12 { margin-left: calc(100% * 12 / var(--columns)); }
  .offset-16-xxl-13 { margin-left: calc(100% * 13 / var(--columns)); }
  .offset-16-xxl-14 { margin-left: calc(100% * 14 / var(--columns)); }
  .offset-16-xxl-15 { margin-left: calc(100% * 15 / var(--columns)); }
}