/* Bootstrap 4.6 (loaded from CDN in index.html) has no xxl grid tier - that
   was added in Bootstrap 5. This fills the gap at the same 1400px breakpoint
   Bootstrap 5 itself uses, mirroring Bootstrap 4's own col-lg-N and
   offset-lg-N pattern exactly so col-xxl-N and offset-xxl-N drop into any
   existing row unmodified. */
@media (min-width: 1400px) {
    .col-xxl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .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%; }

    .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%; }
}

/* A further tier above xxl, for very wide container-fluid layouts (six grid
   cards per row via col-xxxl-2, instead of the four col-xxl-3 gives at
   1400px). Same Bootstrap 4 col-lg-N/offset-lg-N pattern, just one tier up. */
@media (min-width: 2800px) {
    .col-xxxl {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xxxl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xxxl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xxxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xxxl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xxxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xxxl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xxxl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xxxl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xxxl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xxxl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xxxl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xxxl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xxxl-12 { flex: 0 0 100%; max-width: 100%; }

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