/* ==========================================================
   Flexbox Grid System (12 columns) + Offsets + Order
   Breakpoints: xs(0), sm(576), md(768), lg(992), xl(1200), xxl(1400)
   Optional "gap mode": .row.gap uses real gap AND keeps 12-col alignment.
   ========================================================== */

/* ---------- Config ---------- */
:root{
  --gutter: 24px;

  /* Container */
  --container-padding: calc(var(--gutter) / 2);
  --container-max: 100%;
}

/* ---------- Container ---------- */
.container,
.container-fluid{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container{ max-width: var(--container-max); }
.container-fluid{ max-width: 100%; }

/* Container max widths (common devices) */
@media (min-width: 576px){  :root{ --container-max: 540px; } }
@media (min-width: 768px){  :root{ --container-max: 720px; } }
@media (min-width: 992px){  :root{ --container-max: 960px; } }
@media (min-width: 1200px){ :root{ --container-max: 1140px; } }
@media (min-width: 1400px){ :root{ --container-max: 1320px; } }

/* ---------- Row ---------- */
/* Fallback row: classic gutters via negative margins */
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) / -2);
  margin-right: calc(var(--gutter) / -2);
}

/* Optional: real gap row (no negative margins) */
.row.gap{
  margin-left: 0;
  margin-right: 0;
  gap: var(--gutter);

  /* 12-col grid math with 11 gaps:
     colW = (100% - 11*gutter) / 12
     spanW = colW*span + gutter*(span-1)
     offsetW = colW*offset + gutter*offset
  */
  --colw: calc((100% - (11 * var(--gutter))) / 12);
}

/* ---------- Columns ---------- */
.col{
  min-width: 0;
  padding-left: calc(var(--gutter) / 2);
  padding-right: calc(var(--gutter) / 2);

  /* default */
  --span: auto;      /* auto = equal columns */
  --offset: 0;
}

/* Equal-width auto cols if only .col used */
.row > .col{
  flex: 1 1 0;
}

/* Fixed span behavior (fallback row) */
.row:not(.gap) > .col{
  /* Only apply if --span is a number (we override in span classes) */
}
.row:not(.gap) > .col[style*="--span:"],
/* (No dependency on inline styles; span classes set --span, see below) */
.row:not(.gap) > .col{
  /* span width when --span is numeric */
  /* We can’t detect auto in pure CSS, so: span classes also set flex explicitly. */
}

/* Gap row: remove padding-based gutters (gap handles spacing) */
.row.gap > .col{
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Span Classes (xs) ---------- */
/* We set --span and also set fixed flex/max-width for non-gap rows.
   For gap rows, a separate rule uses --colw math. */

[class*="col-"]{ /* nothing by default */ }

.col-1  { --span: 1;  flex: 0 0 calc(100%/12*1);  max-width: calc(100%/12*1); }
.col-2  { --span: 2;  flex: 0 0 calc(100%/12*2);  max-width: calc(100%/12*2); }
.col-3  { --span: 3;  flex: 0 0 calc(100%/12*3);  max-width: calc(100%/12*3); }
.col-4  { --span: 4;  flex: 0 0 calc(100%/12*4);  max-width: calc(100%/12*4); }
.col-5  { --span: 5;  flex: 0 0 calc(100%/12*5);  max-width: calc(100%/12*5); }
.col-6  { --span: 6;  flex: 0 0 calc(100%/12*6);  max-width: calc(100%/12*6); }
.col-7  { --span: 7;  flex: 0 0 calc(100%/12*7);  max-width: calc(100%/12*7); }
.col-8  { --span: 8;  flex: 0 0 calc(100%/12*8);  max-width: calc(100%/12*8); }
.col-9  { --span: 9;  flex: 0 0 calc(100%/12*9);  max-width: calc(100%/12*9); }
.col-10 { --span: 10; flex: 0 0 calc(100%/12*10); max-width: calc(100%/12*10); }
.col-11 { --span: 11; flex: 0 0 calc(100%/12*11); max-width: calc(100%/12*11); }
.col-12 { --span: 12; flex: 0 0 100%;            max-width: 100%; }

/* Gap math for spans (xs) */
.row.gap > .col-1  { flex: 0 0 calc(var(--colw)*1  + var(--gutter)*0);  max-width: calc(var(--colw)*1  + var(--gutter)*0); }
.row.gap > .col-2  { flex: 0 0 calc(var(--colw)*2  + var(--gutter)*1);  max-width: calc(var(--colw)*2  + var(--gutter)*1); }
.row.gap > .col-3  { flex: 0 0 calc(var(--colw)*3  + var(--gutter)*2);  max-width: calc(var(--colw)*3  + var(--gutter)*2); }
.row.gap > .col-4  { flex: 0 0 calc(var(--colw)*4  + var(--gutter)*3);  max-width: calc(var(--colw)*4  + var(--gutter)*3); }
.row.gap > .col-5  { flex: 0 0 calc(var(--colw)*5  + var(--gutter)*4);  max-width: calc(var(--colw)*5  + var(--gutter)*4); }
.row.gap > .col-6  { flex: 0 0 calc(var(--colw)*6  + var(--gutter)*5);  max-width: calc(var(--colw)*6  + var(--gutter)*5); }
.row.gap > .col-7  { flex: 0 0 calc(var(--colw)*7  + var(--gutter)*6);  max-width: calc(var(--colw)*7  + var(--gutter)*6); }
.row.gap > .col-8  { flex: 0 0 calc(var(--colw)*8  + var(--gutter)*7);  max-width: calc(var(--colw)*8  + var(--gutter)*7); }
.row.gap > .col-9  { flex: 0 0 calc(var(--colw)*9  + var(--gutter)*8);  max-width: calc(var(--colw)*9  + var(--gutter)*8); }
.row.gap > .col-10 { flex: 0 0 calc(var(--colw)*10 + var(--gutter)*9);  max-width: calc(var(--colw)*10 + var(--gutter)*9); }
.row.gap > .col-11 { flex: 0 0 calc(var(--colw)*11 + var(--gutter)*10); max-width: calc(var(--colw)*11 + var(--gutter)*10); }
.row.gap > .col-12 { flex: 0 0 100%; max-width: 100%; }

/* ---------- Offsets (xs) ---------- */
.offset-0  { margin-left: 0; }
.offset-1  { margin-left: calc(100%/12*1); }
.offset-2  { margin-left: calc(100%/12*2); }
.offset-3  { margin-left: calc(100%/12*3); }
.offset-4  { margin-left: calc(100%/12*4); }
.offset-5  { margin-left: calc(100%/12*5); }
.offset-6  { margin-left: calc(100%/12*6); }
.offset-7  { margin-left: calc(100%/12*7); }
.offset-8  { margin-left: calc(100%/12*8); }
.offset-9  { margin-left: calc(100%/12*9); }
.offset-10 { margin-left: calc(100%/12*10); }
.offset-11 { margin-left: calc(100%/12*11); }

/* Gap offsets (xs) */
.row.gap > .offset-0  { margin-left: 0; }
.row.gap > .offset-1  { margin-left: calc(var(--colw)*1  + var(--gutter)*1); }
.row.gap > .offset-2  { margin-left: calc(var(--colw)*2  + var(--gutter)*2); }
.row.gap > .offset-3  { margin-left: calc(var(--colw)*3  + var(--gutter)*3); }
.row.gap > .offset-4  { margin-left: calc(var(--colw)*4  + var(--gutter)*4); }
.row.gap > .offset-5  { margin-left: calc(var(--colw)*5  + var(--gutter)*5); }
.row.gap > .offset-6  { margin-left: calc(var(--colw)*6  + var(--gutter)*6); }
.row.gap > .offset-7  { margin-left: calc(var(--colw)*7  + var(--gutter)*7); }
.row.gap > .offset-8  { margin-left: calc(var(--colw)*8  + var(--gutter)*8); }
.row.gap > .offset-9  { margin-left: calc(var(--colw)*9  + var(--gutter)*9); }
.row.gap > .offset-10 { margin-left: calc(var(--colw)*10 + var(--gutter)*10); }
.row.gap > .offset-11 { margin-left: calc(var(--colw)*11 + var(--gutter)*11); }

/* ---------- Order (xs) ---------- */
.order--1 { order: -1; }
.order-0  { order: 0; }
.order-1  { order: 1; }
.order-2  { order: 2; }
.order-3  { order: 3; }
.order-4  { order: 4; }
.order-5  { order: 5; }
.order-6  { order: 6; }
.order-7  { order: 7; }
.order-8  { order: 8; }
.order-9  { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }

/* ---------- Alignment utilities ---------- */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }

/* ---------- Breakpoints helpers ---------- */
/* sm ≥ 576 */
@media (min-width: 576px){
  .col-sm-1  { --span: 1;  flex: 0 0 calc(100%/12*1);  max-width: calc(100%/12*1); }
  .col-sm-2  { --span: 2;  flex: 0 0 calc(100%/12*2);  max-width: calc(100%/12*2); }
  .col-sm-3  { --span: 3;  flex: 0 0 calc(100%/12*3);  max-width: calc(100%/12*3); }
  .col-sm-4  { --span: 4;  flex: 0 0 calc(100%/12*4);  max-width: calc(100%/12*4); }
  .col-sm-5  { --span: 5;  flex: 0 0 calc(100%/12*5);  max-width: calc(100%/12*5); }
  .col-sm-6  { --span: 6;  flex: 0 0 calc(100%/12*6);  max-width: calc(100%/12*6); }
  .col-sm-7  { --span: 7;  flex: 0 0 calc(100%/12*7);  max-width: calc(100%/12*7); }
  .col-sm-8  { --span: 8;  flex: 0 0 calc(100%/12*8);  max-width: calc(100%/12*8); }
  .col-sm-9  { --span: 9;  flex: 0 0 calc(100%/12*9);  max-width: calc(100%/12*9); }
  .col-sm-10 { --span: 10; flex: 0 0 calc(100%/12*10); max-width: calc(100%/12*10); }
  .col-sm-11 { --span: 11; flex: 0 0 calc(100%/12*11); max-width: calc(100%/12*11); }
  .col-sm-12 { --span: 12; flex: 0 0 100%;            max-width: 100%; }

  .row.gap > .col-sm-1  { flex: 0 0 calc(var(--colw)*1  + var(--gutter)*0);  max-width: calc(var(--colw)*1  + var(--gutter)*0); }
  .row.gap > .col-sm-2  { flex: 0 0 calc(var(--colw)*2  + var(--gutter)*1);  max-width: calc(var(--colw)*2  + var(--gutter)*1); }
  .row.gap > .col-sm-3  { flex: 0 0 calc(var(--colw)*3  + var(--gutter)*2);  max-width: calc(var(--colw)*3  + var(--gutter)*2); }
  .row.gap > .col-sm-4  { flex: 0 0 calc(var(--colw)*4  + var(--gutter)*3);  max-width: calc(var(--colw)*4  + var(--gutter)*3); }
  .row.gap > .col-sm-5  { flex: 0 0 calc(var(--colw)*5  + var(--gutter)*4);  max-width: calc(var(--colw)*5  + var(--gutter)*4); }
  .row.gap > .col-sm-6  { flex: 0 0 calc(var(--colw)*6  + var(--gutter)*5);  max-width: calc(var(--colw)*6  + var(--gutter)*5); }
  .row.gap > .col-sm-7  { flex: 0 0 calc(var(--colw)*7  + var(--gutter)*6);  max-width: calc(var(--colw)*7  + var(--gutter)*6); }
  .row.gap > .col-sm-8  { flex: 0 0 calc(var(--colw)*8  + var(--gutter)*7);  max-width: calc(var(--colw)*8  + var(--gutter)*7); }
  .row.gap > .col-sm-9  { flex: 0 0 calc(var(--colw)*9  + var(--gutter)*8);  max-width: calc(var(--colw)*9  + var(--gutter)*8); }
  .row.gap > .col-sm-10 { flex: 0 0 calc(var(--colw)*10 + var(--gutter)*9);  max-width: calc(var(--colw)*10 + var(--gutter)*9); }
  .row.gap > .col-sm-11 { flex: 0 0 calc(var(--colw)*11 + var(--gutter)*10); max-width: calc(var(--colw)*11 + var(--gutter)*10); }
  .row.gap > .col-sm-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-sm-0  { margin-left: 0; }
  .offset-sm-1  { margin-left: calc(100%/12*1); }
  .offset-sm-2  { margin-left: calc(100%/12*2); }
  .offset-sm-3  { margin-left: calc(100%/12*3); }
  .offset-sm-4  { margin-left: calc(100%/12*4); }
  .offset-sm-5  { margin-left: calc(100%/12*5); }
  .offset-sm-6  { margin-left: calc(100%/12*6); }
  .offset-sm-7  { margin-left: calc(100%/12*7); }
  .offset-sm-8  { margin-left: calc(100%/12*8); }
  .offset-sm-9  { margin-left: calc(100%/12*9); }
  .offset-sm-10 { margin-left: calc(100%/12*10); }
  .offset-sm-11 { margin-left: calc(100%/12*11); }

  .row.gap > .offset-sm-0  { margin-left: 0; }
  .row.gap > .offset-sm-1  { margin-left: calc(var(--colw)*1  + var(--gutter)*1); }
  .row.gap > .offset-sm-2  { margin-left: calc(var(--colw)*2  + var(--gutter)*2); }
  .row.gap > .offset-sm-3  { margin-left: calc(var(--colw)*3  + var(--gutter)*3); }
  .row.gap > .offset-sm-4  { margin-left: calc(var(--colw)*4  + var(--gutter)*4); }
  .row.gap > .offset-sm-5  { margin-left: calc(var(--colw)*5  + var(--gutter)*5); }
  .row.gap > .offset-sm-6  { margin-left: calc(var(--colw)*6  + var(--gutter)*6); }
  .row.gap > .offset-sm-7  { margin-left: calc(var(--colw)*7  + var(--gutter)*7); }
  .row.gap > .offset-sm-8  { margin-left: calc(var(--colw)*8  + var(--gutter)*8); }
  .row.gap > .offset-sm-9  { margin-left: calc(var(--colw)*9  + var(--gutter)*9); }
  .row.gap > .offset-sm-10 { margin-left: calc(var(--colw)*10 + var(--gutter)*10); }
  .row.gap > .offset-sm-11 { margin-left: calc(var(--colw)*11 + var(--gutter)*11); }

  .order-sm--1 { order: -1; }
  .order-sm-0  { order: 0; }
  .order-sm-1  { order: 1; }
  .order-sm-2  { order: 2; }
  .order-sm-3  { order: 3; }
  .order-sm-4  { order: 4; }
  .order-sm-5  { order: 5; }
  .order-sm-6  { order: 6; }
  .order-sm-7  { order: 7; }
  .order-sm-8  { order: 8; }
  .order-sm-9  { order: 9; }
  .order-sm-10 { order: 10; }
  .order-sm-11 { order: 11; }
  .order-sm-12 { order: 12; }
}

/* md ≥ 768 */
@media (min-width: 768px){
  .col-md-1  { --span: 1;  flex: 0 0 calc(100%/12*1);  max-width: calc(100%/12*1); }
  .col-md-2  { --span: 2;  flex: 0 0 calc(100%/12*2);  max-width: calc(100%/12*2); }
  .col-md-3  { --span: 3;  flex: 0 0 calc(100%/12*3);  max-width: calc(100%/12*3); }
  .col-md-4  { --span: 4;  flex: 0 0 calc(100%/12*4);  max-width: calc(100%/12*4); }
  .col-md-5  { --span: 5;  flex: 0 0 calc(100%/12*5);  max-width: calc(100%/12*5); }
  .col-md-6  { --span: 6;  flex: 0 0 calc(100%/12*6);  max-width: calc(100%/12*6); }
  .col-md-7  { --span: 7;  flex: 0 0 calc(100%/12*7);  max-width: calc(100%/12*7); }
  .col-md-8  { --span: 8;  flex: 0 0 calc(100%/12*8);  max-width: calc(100%/12*8); }
  .col-md-9  { --span: 9;  flex: 0 0 calc(100%/12*9);  max-width: calc(100%/12*9); }
  .col-md-10 { --span: 10; flex: 0 0 calc(100%/12*10); max-width: calc(100%/12*10); }
  .col-md-11 { --span: 11; flex: 0 0 calc(100%/12*11); max-width: calc(100%/12*11); }
  .col-md-12 { --span: 12; flex: 0 0 100%;            max-width: 100%; }

  .row.gap > .col-md-1  { flex: 0 0 calc(var(--colw)*1  + var(--gutter)*0);  max-width: calc(var(--colw)*1  + var(--gutter)*0); }
  .row.gap > .col-md-2  { flex: 0 0 calc(var(--colw)*2  + var(--gutter)*1);  max-width: calc(var(--colw)*2  + var(--gutter)*1); }
  .row.gap > .col-md-3  { flex: 0 0 calc(var(--colw)*3  + var(--gutter)*2);  max-width: calc(var(--colw)*3  + var(--gutter)*2); }
  .row.gap > .col-md-4  { flex: 0 0 calc(var(--colw)*4  + var(--gutter)*3);  max-width: calc(var(--colw)*4  + var(--gutter)*3); }
  .row.gap > .col-md-5  { flex: 0 0 calc(var(--colw)*5  + var(--gutter)*4);  max-width: calc(var(--colw)*5  + var(--gutter)*4); }
  .row.gap > .col-md-6  { flex: 0 0 calc(var(--colw)*6  + var(--gutter)*5);  max-width: calc(var(--colw)*6  + var(--gutter)*5); }
  .row.gap > .col-md-7  { flex: 0 0 calc(var(--colw)*7  + var(--gutter)*6);  max-width: calc(var(--colw)*7  + var(--gutter)*6); }
  .row.gap > .col-md-8  { flex: 0 0 calc(var(--colw)*8  + var(--gutter)*7);  max-width: calc(var(--colw)*8  + var(--gutter)*7); }
  .row.gap > .col-md-9  { flex: 0 0 calc(var(--colw)*9  + var(--gutter)*8);  max-width: calc(var(--colw)*9  + var(--gutter)*8); }
  .row.gap > .col-md-10 { flex: 0 0 calc(var(--colw)*10 + var(--gutter)*9);  max-width: calc(var(--colw)*10 + var(--gutter)*9); }
  .row.gap > .col-md-11 { flex: 0 0 calc(var(--colw)*11 + var(--gutter)*10); max-width: calc(var(--colw)*11 + var(--gutter)*10); }
  .row.gap > .col-md-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-md-0  { margin-left: 0; }
  .offset-md-1  { margin-left: calc(100%/12*1); }
  .offset-md-2  { margin-left: calc(100%/12*2); }
  .offset-md-3  { margin-left: calc(100%/12*3); }
  .offset-md-4  { margin-left: calc(100%/12*4); }
  .offset-md-5  { margin-left: calc(100%/12*5); }
  .offset-md-6  { margin-left: calc(100%/12*6); }
  .offset-md-7  { margin-left: calc(100%/12*7); }
  .offset-md-8  { margin-left: calc(100%/12*8); }
  .offset-md-9  { margin-left: calc(100%/12*9); }
  .offset-md-10 { margin-left: calc(100%/12*10); }
  .offset-md-11 { margin-left: calc(100%/12*11); }

  .row.gap > .offset-md-0  { margin-left: 0; }
  .row.gap > .offset-md-1  { margin-left: calc(var(--colw)*1  + var(--gutter)*1); }
  .row.gap > .offset-md-2  { margin-left: calc(var(--colw)*2  + var(--gutter)*2); }
  .row.gap > .offset-md-3  { margin-left: calc(var(--colw)*3  + var(--gutter)*3); }
  .row.gap > .offset-md-4  { margin-left: calc(var(--colw)*4  + var(--gutter)*4); }
  .row.gap > .offset-md-5  { margin-left: calc(var(--colw)*5  + var(--gutter)*5); }
  .row.gap > .offset-md-6  { margin-left: calc(var(--colw)*6  + var(--gutter)*6); }
  .row.gap > .offset-md-7  { margin-left: calc(var(--colw)*7  + var(--gutter)*7); }
  .row.gap > .offset-md-8  { margin-left: calc(var(--colw)*8  + var(--gutter)*8); }
  .row.gap > .offset-md-9  { margin-left: calc(var(--colw)*9  + var(--gutter)*9); }
  .row.gap > .offset-md-10 { margin-left: calc(var(--colw)*10 + var(--gutter)*10); }
  .row.gap > .offset-md-11 { margin-left: calc(var(--colw)*11 + var(--gutter)*11); }

  .order-md--1 { order: -1; }
  .order-md-0  { order: 0; }
  .order-md-1  { order: 1; }
  .order-md-2  { order: 2; }
  .order-md-3  { order: 3; }
  .order-md-4  { order: 4; }
  .order-md-5  { order: 5; }
  .order-md-6  { order: 6; }
  .order-md-7  { order: 7; }
  .order-md-8  { order: 8; }
  .order-md-9  { order: 9; }
  .order-md-10 { order: 10; }
  .order-md-11 { order: 11; }
  .order-md-12 { order: 12; }
}

/* lg ≥ 992 */
@media (min-width: 992px){
  .col-lg-1  { --span: 1;  flex: 0 0 calc(100%/12*1);  max-width: calc(100%/12*1); }
  .col-lg-2  { --span: 2;  flex: 0 0 calc(100%/12*2);  max-width: calc(100%/12*2); }
  .col-lg-3  { --span: 3;  flex: 0 0 calc(100%/12*3);  max-width: calc(100%/12*3); }
  .col-lg-4  { --span: 4;  flex: 0 0 calc(100%/12*4);  max-width: calc(100%/12*4); }
  .col-lg-5  { --span: 5;  flex: 0 0 calc(100%/12*5);  max-width: calc(100%/12*5); }
  .col-lg-6  { --span: 6;  flex: 0 0 calc(100%/12*6);  max-width: calc(100%/12*6); }
  .col-lg-7  { --span: 7;  flex: 0 0 calc(100%/12*7);  max-width: calc(100%/12*7); }
  .col-lg-8  { --span: 8;  flex: 0 0 calc(100%/12*8);  max-width: calc(100%/12*8); }
  .col-lg-9  { --span: 9;  flex: 0 0 calc(100%/12*9);  max-width: calc(100%/12*9); }
  .col-lg-10 { --span: 10; flex: 0 0 calc(100%/12*10); max-width: calc(100%/12*10); }
  .col-lg-11 { --span: 11; flex: 0 0 calc(100%/12*11); max-width: calc(100%/12*11); }
  .col-lg-12 { --span: 12; flex: 0 0 100%;            max-width: 100%; }

  .row.gap > .col-lg-1  { flex: 0 0 calc(var(--colw)*1  + var(--gutter)*0);  max-width: calc(var(--colw)*1  + var(--gutter)*0); }
  .row.gap > .col-lg-2  { flex: 0 0 calc(var(--colw)*2  + var(--gutter)*1);  max-width: calc(var(--colw)*2  + var(--gutter)*1); }
  .row.gap > .col-lg-3  { flex: 0 0 calc(var(--colw)*3  + var(--gutter)*2);  max-width: calc(var(--colw)*3  + var(--gutter)*2); }
  .row.gap > .col-lg-4  { flex: 0 0 calc(var(--colw)*4  + var(--gutter)*3);  max-width: calc(var(--colw)*4  + var(--gutter)*3); }
  .row.gap > .col-lg-5  { flex: 0 0 calc(var(--colw)*5  + var(--gutter)*4);  max-width: calc(var(--colw)*5  + var(--gutter)*4); }
  .row.gap > .col-lg-6  { flex: 0 0 calc(var(--colw)*6  + var(--gutter)*5);  max-width: calc(var(--colw)*6  + var(--gutter)*5); }
  .row.gap > .col-lg-7  { flex: 0 0 calc(var(--colw)*7  + var(--gutter)*6);  max-width: calc(var(--colw)*7  + var(--gutter)*6); }
  .row.gap > .col-lg-8  { flex: 0 0 calc(var(--colw)*8  + var(--gutter)*7);  max-width: calc(var(--colw)*8  + var(--gutter)*7); }
  .row.gap > .col-lg-9  { flex: 0 0 calc(var(--colw)*9  + var(--gutter)*8);  max-width: calc(var(--colw)*9  + var(--gutter)*8); }
  .row.gap > .col-lg-10 { flex: 0 0 calc(var(--colw)*10 + var(--gutter)*9);  max-width: calc(var(--colw)*10 + var(--gutter)*9); }
  .row.gap > .col-lg-11 { flex: 0 0 calc(var(--colw)*11 + var(--gutter)*10); max-width: calc(var(--colw)*11 + var(--gutter)*10); }
  .row.gap > .col-lg-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-lg-0  { margin-left: 0; }
  .offset-lg-1  { margin-left: calc(100%/12*1); }
  .offset-lg-2  { margin-left: calc(100%/12*2); }
  .offset-lg-3  { margin-left: calc(100%/12*3); }
  .offset-lg-4  { margin-left: calc(100%/12*4); }
  .offset-lg-5  { margin-left: calc(100%/12*5); }
  .offset-lg-6  { margin-left: calc(100%/12*6); }
  .offset-lg-7  { margin-left: calc(100%/12*7); }
  .offset-lg-8  { margin-left: calc(100%/12*8); }
  .offset-lg-9  { margin-left: calc(100%/12*9); }
  .offset-lg-10 { margin-left: calc(100%/12*10); }
  .offset-lg-11 { margin-left: calc(100%/12*11); }

  .row.gap > .offset-lg-0  { margin-left: 0; }
  .row.gap > .offset-lg-1  { margin-left: calc(var(--colw)*1  + var(--gutter)*1); }
  .row.gap > .offset-lg-2  { margin-left: calc(var(--colw)*2  + var(--gutter)*2); }
  .row.gap > .offset-lg-3  { margin-left: calc(var(--colw)*3  + var(--gutter)*3); }
  .row.gap > .offset-lg-4  { margin-left: calc(var(--colw)*4  + var(--gutter)*4); }
  .row.gap > .offset-lg-5  { margin-left: calc(var(--colw)*5  + var(--gutter)*5); }
  .row.gap > .offset-lg-6  { margin-left: calc(var(--colw)*6  + var(--gutter)*6); }
  .row.gap > .offset-lg-7  { margin-left: calc(var(--colw)*7  + var(--gutter)*7); }
  .row.gap > .offset-lg-8  { margin-left: calc(var(--colw)*8  + var(--gutter)*8); }
  .row.gap > .offset-lg-9  { margin-left: calc(var(--colw)*9  + var(--gutter)*9); }
  .row.gap > .offset-lg-10 { margin-left: calc(var(--colw)*10 + var(--gutter)*10); }
  .row.gap > .offset-lg-11 { margin-left: calc(var(--colw)*11 + var(--gutter)*11); }

  .order-lg--1 { order: -1; }
  .order-lg-0  { order: 0; }
  .order-lg-1  { order: 1; }
  .order-lg-2  { order: 2; }
  .order-lg-3  { order: 3; }
  .order-lg-4  { order: 4; }
  .order-lg-5  { order: 5; }
  .order-lg-6  { order: 6; }
  .order-lg-7  { order: 7; }
  .order-lg-8  { order: 8; }
  .order-lg-9  { order: 9; }
  .order-lg-10 { order: 10; }
  .order-lg-11 { order: 11; }
  .order-lg-12 { order: 12; }
}

/* xl ≥ 1200 */
@media (min-width: 1200px){
  .col-xl-1  { --span: 1;  flex: 0 0 calc(100%/12*1);  max-width: calc(100%/12*1); }
  .col-xl-2  { --span: 2;  flex: 0 0 calc(100%/12*2);  max-width: calc(100%/12*2); }
  .col-xl-3  { --span: 3;  flex: 0 0 calc(100%/12*3);  max-width: calc(100%/12*3); }
  .col-xl-4  { --span: 4;  flex: 0 0 calc(100%/12*4);  max-width: calc(100%/12*4); }
  .col-xl-5  { --span: 5;  flex: 0 0 calc(100%/12*5);  max-width: calc(100%/12*5); }
  .col-xl-6  { --span: 6;  flex: 0 0 calc(100%/12*6);  max-width: calc(100%/12*6); }
  .col-xl-7  { --span: 7;  flex: 0 0 calc(100%/12*7);  max-width: calc(100%/12*7); }
  .col-xl-8  { --span: 8;  flex: 0 0 calc(100%/12*8);  max-width: calc(100%/12*8); }
  .col-xl-9  { --span: 9;  flex: 0 0 calc(100%/12*9);  max-width: calc(100%/12*9); }
  .col-xl-10 { --span: 10; flex: 0 0 calc(100%/12*10); max-width: calc(100%/12*10); }
  .col-xl-11 { --span: 11; flex: 0 0 calc(100%/12*11); max-width: calc(100%/12*11); }
  .col-xl-12 { --span: 12; flex: 0 0 100%;            max-width: 100%; }

  .row.gap > .col-xl-1  { flex: 0 0 calc(var(--colw)*1  + var(--gutter)*0);  max-width: calc(var(--colw)*1  + var(--gutter)*0); }
  .row.gap > .col-xl-2  { flex: 0 0 calc(var(--colw)*2  + var(--gutter)*1);  max-width: calc(var(--colw)*2  + var(--gutter)*1); }
  .row.gap > .col-xl-3  { flex: 0 0 calc(var(--colw)*3  + var(--gutter)*2);  max-width: calc(var(--colw)*3  + var(--gutter)*2); }
  .row.gap > .col-xl-4  { flex: 0 0 calc(var(--colw)*4  + var(--gutter)*3);  max-width: calc(var(--colw)*4  + var(--gutter)*3); }
  .row.gap > .col-xl-5  { flex: 0 0 calc(var(--colw)*5  + var(--gutter)*4);  max-width: calc(var(--colw)*5  + var(--gutter)*4); }
  .row.gap > .col-xl-6  { flex: 0 0 calc(var(--colw)*6  + var(--gutter)*5);  max-width: calc(var(--colw)*6  + var(--gutter)*5); }
  .row.gap > .col-xl-7  { flex: 0 0 calc(var(--colw)*7  + var(--gutter)*6);  max-width: calc(var(--colw)*7  + var(--gutter)*6); }
  .row.gap > .col-xl-8  { flex: 0 0 calc(var(--colw)*8  + var(--gutter)*7);  max-width: calc(var(--colw)*8  + var(--gutter)*7); }
  .row.gap > .col-xl-9  { flex: 0 0 calc(var(--colw)*9  + var(--gutter)*8);  max-width: calc(var(--colw)*9  + var(--gutter)*8); }
  .row.gap > .col-xl-10 { flex: 0 0 calc(var(--colw)*10 + var(--gutter)*9);  max-width: calc(var(--colw)*10 + var(--gutter)*9); }
  .row.gap > .col-xl-11 { flex: 0 0 calc(var(--colw)*11 + var(--gutter)*10); max-width: calc(var(--colw)*11 + var(--gutter)*10); }
  .row.gap > .col-xl-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-xl-0  { margin-left: 0; }
  .offset-xl-1  { margin-left: calc(100%/12*1); }
  .offset-xl-2  { margin-left: calc(100%/12*2); }
  .offset-xl-3  { margin-left: calc(100%/12*3); }
  .offset-xl-4  { margin-left: calc(100%/12*4); }
  .offset-xl-5  { margin-left: calc(100%/12*5); }
  .offset-xl-6  { margin-left: calc(100%/12*6); }
  .offset-xl-7  { margin-left: calc(100%/12*7); }
  .offset-xl-8  { margin-left: calc(100%/12*8); }
  .offset-xl-9  { margin-left: calc(100%/12*9); }
  .offset-xl-10 { margin-left: calc(100%/12*10); }
  .offset-xl-11 { margin-left: calc(100%/12*11); }

  .row.gap > .offset-xl-0  { margin-left: 0; }
  .row.gap > .offset-xl-1  { margin-left: calc(var(--colw)*1  + var(--gutter)*1); }
  .row.gap > .offset-xl-2  { margin-left: calc(var(--colw)*2  + var(--gutter)*2); }
  .row.gap > .offset-xl-3  { margin-left: calc(var(--colw)*3  + var(--gutter)*3); }
  .row.gap > .offset-xl-4  { margin-left: calc(var(--colw)*4  + var(--gutter)*4); }
  .row.gap > .offset-xl-5  { margin-left: calc(var(--colw)*5  + var(--gutter)*5); }
  .row.gap > .offset-xl-6  { margin-left: calc(var(--colw)*6  + var(--gutter)*6); }
  .row.gap > .offset-xl-7  { margin-left: calc(var(--colw)*7  + var(--gutter)*7); }
  .row.gap > .offset-xl-8  { margin-left: calc(var(--colw)*8  + var(--gutter)*8); }
  .row.gap > .offset-xl-9  { margin-left: calc(var(--colw)*9  + var(--gutter)*9); }
  .row.gap > .offset-xl-10 { margin-left: calc(var(--colw)*10 + var(--gutter)*10); }
  .row.gap > .offset-xl-11 { margin-left: calc(var(--colw)*11 + var(--gutter)*11); }

  .order-xl--1 { order: -1; }
  .order-xl-0  { order: 0; }
  .order-xl-1  { order: 1; }
  .order-xl-2  { order: 2; }
  .order-xl-3  { order: 3; }
  .order-xl-4  { order: 4; }
  .order-xl-5  { order: 5; }
  .order-xl-6  { order: 6; }
  .order-xl-7  { order: 7; }
  .order-xl-8  { order: 8; }
  .order-xl-9  { order: 9; }
  .order-xl-10 { order: 10; }
  .order-xl-11 { order: 11; }
  .order-xl-12 { order: 12; }
}

/* xxl ≥ 1400 */
@media (min-width: 1400px){
  .col-xxl-1  { --span: 1;  flex: 0 0 calc(100%/12*1);  max-width: calc(100%/12*1); }
  .col-xxl-2  { --span: 2;  flex: 0 0 calc(100%/12*2);  max-width: calc(100%/12*2); }
  .col-xxl-3  { --span: 3;  flex: 0 0 calc(100%/12*3);  max-width: calc(100%/12*3); }
  .col-xxl-4  { --span: 4;  flex: 0 0 calc(100%/12*4);  max-width: calc(100%/12*4); }
  .col-xxl-5  { --span: 5;  flex: 0 0 calc(100%/12*5);  max-width: calc(100%/12*5); }
  .col-xxl-6  { --span: 6;  flex: 0 0 calc(100%/12*6);  max-width: calc(100%/12*6); }
  .col-xxl-7  { --span: 7;  flex: 0 0 calc(100%/12*7);  max-width: calc(100%/12*7); }
  .col-xxl-8  { --span: 8;  flex: 0 0 calc(100%/12*8);  max-width: calc(100%/12*8); }
  .col-xxl-9  { --span: 9;  flex: 0 0 calc(100%/12*9);  max-width: calc(100%/12*9); }
  .col-xxl-10 { --span: 10; flex: 0 0 calc(100%/12*10); max-width: calc(100%/12*10); }
  .col-xxl-11 { --span: 11; flex: 0 0 calc(100%/12*11); max-width: calc(100%/12*11); }
  .col-xxl-12 { --span: 12; flex: 0 0 100%;            max-width: 100%; }

  .row.gap > .col-xxl-1  { flex: 0 0 calc(var(--colw)*1  + var(--gutter)*0);  max-width: calc(var(--colw)*1  + var(--gutter)*0); }
  .row.gap > .col-xxl-2  { flex: 0 0 calc(var(--colw)*2  + var(--gutter)*1);  max-width: calc(var(--colw)*2  + var(--gutter)*1); }
  .row.gap > .col-xxl-3  { flex: 0 0 calc(var(--colw)*3  + var(--gutter)*2);  max-width: calc(var(--colw)*3  + var(--gutter)*2); }
  .row.gap > .col-xxl-4  { flex: 0 0 calc(var(--colw)*4  + var(--gutter)*3);  max-width: calc(var(--colw)*4  + var(--gutter)*3); }
  .row.gap > .col-xxl-5  { flex: 0 0 calc(var(--colw)*5  + var(--gutter)*4);  max-width: calc(var(--colw)*5  + var(--gutter)*4); }
  .row.gap > .col-xxl-6  { flex: 0 0 calc(var(--colw)*6  + var(--gutter)*5);  max-width: calc(var(--colw)*6  + var(--gutter)*5); }
  .row.gap > .col-xxl-7  { flex: 0 0 calc(var(--colw)*7  + var(--gutter)*6);  max-width: calc(var(--colw)*7  + var(--gutter)*6); }
  .row.gap > .col-xxl-8  { flex: 0 0 calc(var(--colw)*8  + var(--gutter)*7);  max-width: calc(var(--colw)*8  + var(--gutter)*7); }
  .row.gap > .col-xxl-9  { flex: 0 0 calc(var(--colw)*9  + var(--gutter)*8);  max-width: calc(var(--colw)*9  + var(--gutter)*8); }
  .row.gap > .col-xxl-10 { flex: 0 0 calc(var(--colw)*10 + var(--gutter)*9);  max-width: calc(var(--colw)*10 + var(--gutter)*9); }
  .row.gap > .col-xxl-11 { flex: 0 0 calc(var(--colw)*11 + var(--gutter)*10); max-width: calc(var(--colw)*11 + var(--gutter)*10); }
  .row.gap > .col-xxl-12 { flex: 0 0 100%; max-width: 100%; }

  .offset-xxl-0  { margin-left: 0; }
  .offset-xxl-1  { margin-left: calc(100%/12*1); }
  .offset-xxl-2  { margin-left: calc(100%/12*2); }
  .offset-xxl-3  { margin-left: calc(100%/12*3); }
  .offset-xxl-4  { margin-left: calc(100%/12*4); }
  .offset-xxl-5  { margin-left: calc(100%/12*5); }
  .offset-xxl-6  { margin-left: calc(100%/12*6); }
  .offset-xxl-7  { margin-left: calc(100%/12*7); }
  .offset-xxl-8  { margin-left: calc(100%/12*8); }
  .offset-xxl-9  { margin-left: calc(100%/12*9); }
  .offset-xxl-10 { margin-left: calc(100%/12*10); }
  .offset-xxl-11 { margin-left: calc(100%/12*11); }

  .row.gap > .offset-xxl-0  { margin-left: 0; }
  .row.gap > .offset-xxl-1  { margin-left: calc(var(--colw)*1  + var(--gutter)*1); }
  .row.gap > .offset-xxl-2  { margin-left: calc(var(--colw)*2  + var(--gutter)*2); }
  .row.gap > .offset-xxl-3  { margin-left: calc(var(--colw)*3  + var(--gutter)*3); }
  .row.gap > .offset-xxl-4  { margin-left: calc(var(--colw)*4  + var(--gutter)*4); }
  .row.gap > .offset-xxl-5  { margin-left: calc(var(--colw)*5  + var(--gutter)*5); }
  .row.gap > .offset-xxl-6  { margin-left: calc(var(--colw)*6  + var(--gutter)*6); }
  .row.gap > .offset-xxl-7  { margin-left: calc(var(--colw)*7  + var(--gutter)*7); }
  .row.gap > .offset-xxl-8  { margin-left: calc(var(--colw)*8  + var(--gutter)*8); }
  .row.gap > .offset-xxl-9  { margin-left: calc(var(--colw)*9  + var(--gutter)*9); }
  .row.gap > .offset-xxl-10 { margin-left: calc(var(--colw)*10 + var(--gutter)*10); }
  .row.gap > .offset-xxl-11 { margin-left: calc(var(--colw)*11 + var(--gutter)*11); }

  .order-xxl--1 { order: -1; }
  .order-xxl-0  { order: 0; }
  .order-xxl-1  { order: 1; }
  .order-xxl-2  { order: 2; }
  .order-xxl-3  { order: 3; }
  .order-xxl-4  { order: 4; }
  .order-xxl-5  { order: 5; }
  .order-xxl-6  { order: 6; }
  .order-xxl-7  { order: 7; }
  .order-xxl-8  { order: 8; }
  .order-xxl-9  { order: 9; }
  .order-xxl-10 { order: 10; }
  .order-xxl-11 { order: 11; }
  .order-xxl-12 { order: 12; }
}