/* Add Bootstrap 5-like xxl grid classes to Bootstrap 4 projects */
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
    max-width: 100%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

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

  /* Common order and offset helpers (optional) */
  .order-xxl-first { order: -1; }
  .order-xxl-last  { order: 13; }
  .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; }

  /* Offsets (optional) */
  .offset-xxl-0  { margin-left: 0; }
  .offset-xxl-1  { margin-left: 8.333333%; }
  .offset-xxl-2  { margin-left: 16.666667%; }
  .offset-xxl-3  { margin-left: 25%; }
  .offset-xxl-4  { margin-left: 33.333333%; }
  .offset-xxl-5  { margin-left: 41.666667%; }
  .offset-xxl-6  { margin-left: 50%; }
  .offset-xxl-7  { margin-left: 58.333333%; }
  .offset-xxl-8  { margin-left: 66.666667%; }
  .offset-xxl-9  { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.333333%; }
  .offset-xxl-11 { margin-left: 91.666667%; }
}

/*  za 2k + ekrane */
@media (min-width: 1920px) {
    .col-xxl-akcija {
    flex: 1 0 0%;
    max-width: 100%;
  }
  .col-xxl-akcija-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

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