/*!
 * grid-compat.css — Bootstrap 4 custom breakpoints shim for Bootstrap 5
 *
 * 原專案使用客製化 Bootstrap 4（/css/web/bootstrap.min.css），定義了以下自訂斷點：
 *   col-xx-*  min-width: 320px
 *   col-xs-*  min-width: 480px
 *   col-1k-*  min-width: 1920px
 *   col-2k-*  min-width: 2560px
 *   col-4k-*  min-width: 3084px
 * 前台 layout 切換至官方 Bootstrap 5 後，這些類別不再存在。
 * 此檔案將缺失的格線類別補回，讓舊版 blade 樣板不需修改即可正常顯示。
 *
 * 來源：public/css/web/bootstrap.min.css（Bootstrap v4.3.1 客製版）
 */

/* ── 共用基礎（無斷點） ──────────────────────────────────── */
.col-xx-1, .col-xx-2, .col-xx-3, .col-xx-4, .col-xx-5, .col-xx-6,
.col-xx-7, .col-xx-8, .col-xx-9, .col-xx-10, .col-xx-11, .col-xx-12,
.col-xx, .col-xx-auto,
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12,
.col-xs, .col-xs-auto,
.col-1k-1, .col-1k-2, .col-1k-3, .col-1k-4, .col-1k-5, .col-1k-6,
.col-1k-7, .col-1k-8, .col-1k-9, .col-1k-10, .col-1k-11, .col-1k-12,
.col-1k, .col-1k-auto,
.col-2k-1, .col-2k-2, .col-2k-3, .col-2k-4, .col-2k-5, .col-2k-6,
.col-2k-7, .col-2k-8, .col-2k-9, .col-2k-10, .col-2k-11, .col-2k-12,
.col-2k, .col-2k-auto,
.col-4k-1, .col-4k-2, .col-4k-3, .col-4k-4, .col-4k-5, .col-4k-6,
.col-4k-7, .col-4k-8, .col-4k-9, .col-4k-10, .col-4k-11, .col-4k-12,
.col-4k, .col-4k-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
}

/* ── col-xx-* ：min-width: 320px ─────────────────────────── */
@media (min-width: 320px) {
    .col-xx {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xx-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xx-1  { flex: 0 0 8.33333%;  width: 8.33333%;  max-width: 8.33333%; }
    .col-xx-2  { flex: 0 0 16.66667%; width: 16.66667%; max-width: 16.66667%; }
    .col-xx-3  { flex: 0 0 25%;       width: 25%;        max-width: 25%; }
    .col-xx-4  { flex: 0 0 33.33333%; width: 33.33333%; max-width: 33.33333%; }
    .col-xx-5  { flex: 0 0 41.66667%; width: 41.66667%; max-width: 41.66667%; }
    .col-xx-6  { flex: 0 0 50%;       width: 50%;        max-width: 50%; }
    .col-xx-7  { flex: 0 0 58.33333%; width: 58.33333%; max-width: 58.33333%; }
    .col-xx-8  { flex: 0 0 66.66667%; width: 66.66667%; max-width: 66.66667%; }
    .col-xx-9  { flex: 0 0 75%;       width: 75%;        max-width: 75%; }
    .col-xx-10 { flex: 0 0 83.33333%; width: 83.33333%; max-width: 83.33333%; }
    .col-xx-11 { flex: 0 0 91.66667%; width: 91.66667%; max-width: 91.66667%; }
    .col-xx-12 { flex: 0 0 100%;      width: 100%;       max-width: 100%; }

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

    .offset-xx-0  { margin-left: 0; }
    .offset-xx-1  { margin-left: 8.33333%; }
    .offset-xx-2  { margin-left: 16.66667%; }
    .offset-xx-3  { margin-left: 25%; }
    .offset-xx-4  { margin-left: 33.33333%; }
    .offset-xx-5  { margin-left: 41.66667%; }
    .offset-xx-6  { margin-left: 50%; }
    .offset-xx-7  { margin-left: 58.33333%; }
    .offset-xx-8  { margin-left: 66.66667%; }
    .offset-xx-9  { margin-left: 75%; }
    .offset-xx-10 { margin-left: 83.33333%; }
    .offset-xx-11 { margin-left: 91.66667%; }
}

/* ── col-xs-* ：min-width: 480px ─────────────────────────── */
@media (min-width: 480px) {
    .col-xs {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }
    .col-xs-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    .col-xs-1  { flex: 0 0 8.33333%;  width: 8.33333%;  max-width: 8.33333%; }
    .col-xs-2  { flex: 0 0 16.66667%; width: 16.66667%; max-width: 16.66667%; }
    .col-xs-3  { flex: 0 0 25%;       width: 25%;        max-width: 25%; }
    .col-xs-4  { flex: 0 0 33.33333%; width: 33.33333%; max-width: 33.33333%; }
    .col-xs-5  { flex: 0 0 41.66667%; width: 41.66667%; max-width: 41.66667%; }
    .col-xs-6  { flex: 0 0 50%;       width: 50%;        max-width: 50%; }
    .col-xs-7  { flex: 0 0 58.33333%; width: 58.33333%; max-width: 58.33333%; }
    .col-xs-8  { flex: 0 0 66.66667%; width: 66.66667%; max-width: 66.66667%; }
    .col-xs-9  { flex: 0 0 75%;       width: 75%;        max-width: 75%; }
    .col-xs-10 { flex: 0 0 83.33333%; width: 83.33333%; max-width: 83.33333%; }
    .col-xs-11 { flex: 0 0 91.66667%; width: 91.66667%; max-width: 91.66667%; }
    .col-xs-12 { flex: 0 0 100%;      width: 100%;       max-width: 100%; }

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

    .offset-xs-0  { margin-left: 0; }
    .offset-xs-1  { margin-left: 8.33333%; }
    .offset-xs-2  { margin-left: 16.66667%; }
    .offset-xs-3  { margin-left: 25%; }
    .offset-xs-4  { margin-left: 33.33333%; }
    .offset-xs-5  { margin-left: 41.66667%; }
    .offset-xs-6  { margin-left: 50%; }
    .offset-xs-7  { margin-left: 58.33333%; }
    .offset-xs-8  { margin-left: 66.66667%; }
    .offset-xs-9  { margin-left: 75%; }
    .offset-xs-10 { margin-left: 83.33333%; }
    .offset-xs-11 { margin-left: 91.66667%; }
}

/* ── col-1k-* ：min-width: 1920px ─────────────────────────── */
@media (min-width: 1920px) {
    .col-1k { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-1k-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-1k-1  { flex: 0 0 8.33333%;  width: 8.33333%;  max-width: 8.33333%; }
    .col-1k-2  { flex: 0 0 16.66667%; width: 16.66667%; max-width: 16.66667%; }
    .col-1k-3  { flex: 0 0 25%;       width: 25%;        max-width: 25%; }
    .col-1k-4  { flex: 0 0 33.33333%; width: 33.33333%; max-width: 33.33333%; }
    .col-1k-5  { flex: 0 0 41.66667%; width: 41.66667%; max-width: 41.66667%; }
    .col-1k-6  { flex: 0 0 50%;       width: 50%;        max-width: 50%; }
    .col-1k-7  { flex: 0 0 58.33333%; width: 58.33333%; max-width: 58.33333%; }
    .col-1k-8  { flex: 0 0 66.66667%; width: 66.66667%; max-width: 66.66667%; }
    .col-1k-9  { flex: 0 0 75%;       width: 75%;        max-width: 75%; }
    .col-1k-10 { flex: 0 0 83.33333%; width: 83.33333%; max-width: 83.33333%; }
    .col-1k-11 { flex: 0 0 91.66667%; width: 91.66667%; max-width: 91.66667%; }
    .col-1k-12 { flex: 0 0 100%;      width: 100%;       max-width: 100%; }
    .offset-1k-0  { margin-left: 0; }
    .offset-1k-1  { margin-left: 8.33333%; }
    .offset-1k-2  { margin-left: 16.66667%; }
    .offset-1k-3  { margin-left: 25%; }
    .offset-1k-4  { margin-left: 33.33333%; }
    .offset-1k-5  { margin-left: 41.66667%; }
    .offset-1k-6  { margin-left: 50%; }
    .offset-1k-7  { margin-left: 58.33333%; }
    .offset-1k-8  { margin-left: 66.66667%; }
    .offset-1k-9  { margin-left: 75%; }
    .offset-1k-10 { margin-left: 83.33333%; }
    .offset-1k-11 { margin-left: 91.66667%; }
}

/* ── col-2k-* ：min-width: 2560px ─────────────────────────── */
@media (min-width: 2560px) {
    .col-2k { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-2k-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-2k-1  { flex: 0 0 8.33333%;  width: 8.33333%;  max-width: 8.33333%; }
    .col-2k-2  { flex: 0 0 16.66667%; width: 16.66667%; max-width: 16.66667%; }
    .col-2k-3  { flex: 0 0 25%;       width: 25%;        max-width: 25%; }
    .col-2k-4  { flex: 0 0 33.33333%; width: 33.33333%; max-width: 33.33333%; }
    .col-2k-5  { flex: 0 0 41.66667%; width: 41.66667%; max-width: 41.66667%; }
    .col-2k-6  { flex: 0 0 50%;       width: 50%;        max-width: 50%; }
    .col-2k-7  { flex: 0 0 58.33333%; width: 58.33333%; max-width: 58.33333%; }
    .col-2k-8  { flex: 0 0 66.66667%; width: 66.66667%; max-width: 66.66667%; }
    .col-2k-9  { flex: 0 0 75%;       width: 75%;        max-width: 75%; }
    .col-2k-10 { flex: 0 0 83.33333%; width: 83.33333%; max-width: 83.33333%; }
    .col-2k-11 { flex: 0 0 91.66667%; width: 91.66667%; max-width: 91.66667%; }
    .col-2k-12 { flex: 0 0 100%;      width: 100%;       max-width: 100%; }
    .offset-2k-0  { margin-left: 0; }
    .offset-2k-1  { margin-left: 8.33333%; }
    .offset-2k-2  { margin-left: 16.66667%; }
    .offset-2k-3  { margin-left: 25%; }
    .offset-2k-4  { margin-left: 33.33333%; }
    .offset-2k-5  { margin-left: 41.66667%; }
    .offset-2k-6  { margin-left: 50%; }
    .offset-2k-7  { margin-left: 58.33333%; }
    .offset-2k-8  { margin-left: 66.66667%; }
    .offset-2k-9  { margin-left: 75%; }
    .offset-2k-10 { margin-left: 83.33333%; }
    .offset-2k-11 { margin-left: 91.66667%; }
}

/* ── col-4k-* ：min-width: 3084px ─────────────────────────── */
@media (min-width: 3084px) {
    .col-4k { flex-basis: 0; flex-grow: 1; max-width: 100%; }
    .col-4k-auto { flex: 0 0 auto; width: auto; max-width: 100%; }
    .col-4k-1  { flex: 0 0 8.33333%;  width: 8.33333%;  max-width: 8.33333%; }
    .col-4k-2  { flex: 0 0 16.66667%; width: 16.66667%; max-width: 16.66667%; }
    .col-4k-3  { flex: 0 0 25%;       width: 25%;        max-width: 25%; }
    .col-4k-4  { flex: 0 0 33.33333%; width: 33.33333%; max-width: 33.33333%; }
    .col-4k-5  { flex: 0 0 41.66667%; width: 41.66667%; max-width: 41.66667%; }
    .col-4k-6  { flex: 0 0 50%;       width: 50%;        max-width: 50%; }
    .col-4k-7  { flex: 0 0 58.33333%; width: 58.33333%; max-width: 58.33333%; }
    .col-4k-8  { flex: 0 0 66.66667%; width: 66.66667%; max-width: 66.66667%; }
    .col-4k-9  { flex: 0 0 75%;       width: 75%;        max-width: 75%; }
    .col-4k-10 { flex: 0 0 83.33333%; width: 83.33333%; max-width: 83.33333%; }
    .col-4k-11 { flex: 0 0 91.66667%; width: 91.66667%; max-width: 91.66667%; }
    .col-4k-12 { flex: 0 0 100%;      width: 100%;       max-width: 100%; }
    .offset-4k-0  { margin-left: 0; }
    .offset-4k-1  { margin-left: 8.33333%; }
    .offset-4k-2  { margin-left: 16.66667%; }
    .offset-4k-3  { margin-left: 25%; }
    .offset-4k-4  { margin-left: 33.33333%; }
    .offset-4k-5  { margin-left: 41.66667%; }
    .offset-4k-6  { margin-left: 50%; }
    .offset-4k-7  { margin-left: 58.33333%; }
    .offset-4k-8  { margin-left: 66.66667%; }
    .offset-4k-9  { margin-left: 75%; }
    .offset-4k-10 { margin-left: 83.33333%; }
    .offset-4k-11 { margin-left: 91.66667%; }
}


/* ── xx spacing utilities: margin/padding (320px) ─────────── */
@media (min-width:320px) {
    .m-xx-0 {
        margin: 0 !important
    }

    .mt-xx-0,
    .my-xx-0 {
        margin-top: 0 !important
    }

    .mr-xx-0,
    .mx-xx-0 {
        margin-right: 0 !important
    }

    .mb-xx-0,
    .my-xx-0 {
        margin-bottom: 0 !important
    }

    .ml-xx-0,
    .mx-xx-0 {
        margin-left: 0 !important
    }

    .m-xx-1 {
        margin: 0.25rem !important
    }

    .mt-xx-1,
    .my-xx-1 {
        margin-top: 0.25rem !important
    }

    .mr-xx-1,
    .mx-xx-1 {
        margin-right: 0.25rem !important
    }

    .mb-xx-1,
    .my-xx-1 {
        margin-bottom: 0.25rem !important
    }

    .ml-xx-1,
    .mx-xx-1 {
        margin-left: 0.25rem !important
    }

    .m-xx-2 {
        margin: 0.5rem !important
    }

    .mt-xx-2,
    .my-xx-2 {
        margin-top: 0.5rem !important
    }

    .mr-xx-2,
    .mx-xx-2 {
        margin-right: 0.5rem !important
    }

    .mb-xx-2,
    .my-xx-2 {
        margin-bottom: 0.5rem !important
    }

    .ml-xx-2,
    .mx-xx-2 {
        margin-left: 0.5rem !important
    }

    .m-xx-3 {
        margin: 1rem !important
    }

    .mt-xx-3,
    .my-xx-3 {
        margin-top: 1rem !important
    }

    .mr-xx-3,
    .mx-xx-3 {
        margin-right: 1rem !important
    }

    .mb-xx-3,
    .my-xx-3 {
        margin-bottom: 1rem !important
    }

    .ml-xx-3,
    .mx-xx-3 {
        margin-left: 1rem !important
    }

    .m-xx-4 {
        margin: 1.5rem !important
    }

    .mt-xx-4,
    .my-xx-4 {
        margin-top: 1.5rem !important
    }

    .mr-xx-4,
    .mx-xx-4 {
        margin-right: 1.5rem !important
    }

    .mb-xx-4,
    .my-xx-4 {
        margin-bottom: 1.5rem !important
    }

    .ml-xx-4,
    .mx-xx-4 {
        margin-left: 1.5rem !important
    }

    .m-xx-5 {
        margin: 3rem !important
    }

    .mt-xx-5,
    .my-xx-5 {
        margin-top: 3rem !important
    }

    .mr-xx-5,
    .mx-xx-5 {
        margin-right: 3rem !important
    }

    .mb-xx-5,
    .my-xx-5 {
        margin-bottom: 3rem !important
    }

    .ml-xx-5,
    .mx-xx-5 {
        margin-left: 3rem !important
    }

    .p-xx-0 {
        padding: 0 !important
    }

    .pt-xx-0,
    .py-xx-0 {
        padding-top: 0 !important
    }

    .pr-xx-0,
    .px-xx-0 {
        padding-right: 0 !important
    }

    .pb-xx-0,
    .py-xx-0 {
        padding-bottom: 0 !important
    }

    .pl-xx-0,
    .px-xx-0 {
        padding-left: 0 !important
    }

    .p-xx-1 {
        padding: 0.25rem !important
    }

    .pt-xx-1,
    .py-xx-1 {
        padding-top: 0.25rem !important
    }

    .pr-xx-1,
    .px-xx-1 {
        padding-right: 0.25rem !important
    }

    .pb-xx-1,
    .py-xx-1 {
        padding-bottom: 0.25rem !important
    }

    .pl-xx-1,
    .px-xx-1 {
        padding-left: 0.25rem !important
    }

    .p-xx-2 {
        padding: 0.5rem !important
    }

    .pt-xx-2,
    .py-xx-2 {
        padding-top: 0.5rem !important
    }

    .pr-xx-2,
    .px-xx-2 {
        padding-right: 0.5rem !important
    }

    .pb-xx-2,
    .py-xx-2 {
        padding-bottom: 0.5rem !important
    }

    .pl-xx-2,
    .px-xx-2 {
        padding-left: 0.5rem !important
    }

    .p-xx-3 {
        padding: 1rem !important
    }

    .pt-xx-3,
    .py-xx-3 {
        padding-top: 1rem !important
    }

    .pr-xx-3,
    .px-xx-3 {
        padding-right: 1rem !important
    }

    .pb-xx-3,
    .py-xx-3 {
        padding-bottom: 1rem !important
    }

    .pl-xx-3,
    .px-xx-3 {
        padding-left: 1rem !important
    }

    .p-xx-4 {
        padding: 1.5rem !important
    }

    .pt-xx-4,
    .py-xx-4 {
        padding-top: 1.5rem !important
    }

    .pr-xx-4,
    .px-xx-4 {
        padding-right: 1.5rem !important
    }

    .pb-xx-4,
    .py-xx-4 {
        padding-bottom: 1.5rem !important
    }

    .pl-xx-4,
    .px-xx-4 {
        padding-left: 1.5rem !important
    }

    .p-xx-5 {
        padding: 3rem !important
    }

    .pt-xx-5,
    .py-xx-5 {
        padding-top: 3rem !important
    }

    .pr-xx-5,
    .px-xx-5 {
        padding-right: 3rem !important
    }

    .pb-xx-5,
    .py-xx-5 {
        padding-bottom: 3rem !important
    }

    .pl-xx-5,
    .px-xx-5 {
        padding-left: 3rem !important
    }

    .m-xx-n1 {
        margin: -0.25rem !important
    }

    .mt-xx-n1,
    .my-xx-n1 {
        margin-top: -0.25rem !important
    }

    .mr-xx-n1,
    .mx-xx-n1 {
        margin-right: -0.25rem !important
    }

    .mb-xx-n1,
    .my-xx-n1 {
        margin-bottom: -0.25rem !important
    }

    .ml-xx-n1,
    .mx-xx-n1 {
        margin-left: -0.25rem !important
    }

    .m-xx-n2 {
        margin: -0.5rem !important
    }

    .mt-xx-n2,
    .my-xx-n2 {
        margin-top: -0.5rem !important
    }

    .mr-xx-n2,
    .mx-xx-n2 {
        margin-right: -0.5rem !important
    }

    .mb-xx-n2,
    .my-xx-n2 {
        margin-bottom: -0.5rem !important
    }

    .ml-xx-n2,
    .mx-xx-n2 {
        margin-left: -0.5rem !important
    }

    .m-xx-n3 {
        margin: -1rem !important
    }

    .mt-xx-n3,
    .my-xx-n3 {
        margin-top: -1rem !important
    }

    .mr-xx-n3,
    .mx-xx-n3 {
        margin-right: -1rem !important
    }

    .mb-xx-n3,
    .my-xx-n3 {
        margin-bottom: -1rem !important
    }

    .ml-xx-n3,
    .mx-xx-n3 {
        margin-left: -1rem !important
    }

    .m-xx-n4 {
        margin: -1.5rem !important
    }

    .mt-xx-n4,
    .my-xx-n4 {
        margin-top: -1.5rem !important
    }

    .mr-xx-n4,
    .mx-xx-n4 {
        margin-right: -1.5rem !important
    }

    .mb-xx-n4,
    .my-xx-n4 {
        margin-bottom: -1.5rem !important
    }

    .ml-xx-n4,
    .mx-xx-n4 {
        margin-left: -1.5rem !important
    }

    .m-xx-n5 {
        margin: -3rem !important
    }

    .mt-xx-n5,
    .my-xx-n5 {
        margin-top: -3rem !important
    }

    .mr-xx-n5,
    .mx-xx-n5 {
        margin-right: -3rem !important
    }

    .mb-xx-n5,
    .my-xx-n5 {
        margin-bottom: -3rem !important
    }

    .ml-xx-n5,
    .mx-xx-n5 {
        margin-left: -3rem !important
    }

    .m-xx-auto {
        margin: auto !important
    }

    .mt-xx-auto,
    .my-xx-auto {
        margin-top: auto !important
    }

    .mr-xx-auto,
    .mx-xx-auto {
        margin-right: auto !important
    }

    .mb-xx-auto,
    .my-xx-auto {
        margin-bottom: auto !important
    }

    .ml-xx-auto,
    .mx-xx-auto {
        margin-left: auto !important
    }
}

/* ── xs spacing utilities: margin/padding (480px) ─────────── */
@media (min-width:480px) {
    .m-xs-0 {
        margin: 0 !important
    }

    .mt-xs-0,
    .my-xs-0 {
        margin-top: 0 !important
    }

    .mr-xs-0,
    .mx-xs-0 {
        margin-right: 0 !important
    }

    .mb-xs-0,
    .my-xs-0 {
        margin-bottom: 0 !important
    }

    .ml-xs-0,
    .mx-xs-0 {
        margin-left: 0 !important
    }

    .m-xs-1 {
        margin: 0.25rem !important
    }

    .mt-xs-1,
    .my-xs-1 {
        margin-top: 0.25rem !important
    }

    .mr-xs-1,
    .mx-xs-1 {
        margin-right: 0.25rem !important
    }

    .mb-xs-1,
    .my-xs-1 {
        margin-bottom: 0.25rem !important
    }

    .ml-xs-1,
    .mx-xs-1 {
        margin-left: 0.25rem !important
    }

    .m-xs-2 {
        margin: 0.5rem !important
    }

    .mt-xs-2,
    .my-xs-2 {
        margin-top: 0.5rem !important
    }

    .mr-xs-2,
    .mx-xs-2 {
        margin-right: 0.5rem !important
    }

    .mb-xs-2,
    .my-xs-2 {
        margin-bottom: 0.5rem !important
    }

    .ml-xs-2,
    .mx-xs-2 {
        margin-left: 0.5rem !important
    }

    .m-xs-3 {
        margin: 1rem !important
    }

    .mt-xs-3,
    .my-xs-3 {
        margin-top: 1rem !important
    }

    .mr-xs-3,
    .mx-xs-3 {
        margin-right: 1rem !important
    }

    .mb-xs-3,
    .my-xs-3 {
        margin-bottom: 1rem !important
    }

    .ml-xs-3,
    .mx-xs-3 {
        margin-left: 1rem !important
    }

    .m-xs-4 {
        margin: 1.5rem !important
    }

    .mt-xs-4,
    .my-xs-4 {
        margin-top: 1.5rem !important
    }

    .mr-xs-4,
    .mx-xs-4 {
        margin-right: 1.5rem !important
    }

    .mb-xs-4,
    .my-xs-4 {
        margin-bottom: 1.5rem !important
    }

    .ml-xs-4,
    .mx-xs-4 {
        margin-left: 1.5rem !important
    }

    .m-xs-5 {
        margin: 3rem !important
    }

    .mt-xs-5,
    .my-xs-5 {
        margin-top: 3rem !important
    }

    .mr-xs-5,
    .mx-xs-5 {
        margin-right: 3rem !important
    }

    .mb-xs-5,
    .my-xs-5 {
        margin-bottom: 3rem !important
    }

    .ml-xs-5,
    .mx-xs-5 {
        margin-left: 3rem !important
    }

    .p-xs-0 {
        padding: 0 !important
    }

    .pt-xs-0,
    .py-xs-0 {
        padding-top: 0 !important
    }

    .pr-xs-0,
    .px-xs-0 {
        padding-right: 0 !important
    }

    .pb-xs-0,
    .py-xs-0 {
        padding-bottom: 0 !important
    }

    .pl-xs-0,
    .px-xs-0 {
        padding-left: 0 !important
    }

    .p-xs-1 {
        padding: 0.25rem !important
    }

    .pt-xs-1,
    .py-xs-1 {
        padding-top: 0.25rem !important
    }

    .pr-xs-1,
    .px-xs-1 {
        padding-right: 0.25rem !important
    }

    .pb-xs-1,
    .py-xs-1 {
        padding-bottom: 0.25rem !important
    }

    .pl-xs-1,
    .px-xs-1 {
        padding-left: 0.25rem !important
    }

    .p-xs-2 {
        padding: 0.5rem !important
    }

    .pt-xs-2,
    .py-xs-2 {
        padding-top: 0.5rem !important
    }

    .pr-xs-2,
    .px-xs-2 {
        padding-right: 0.5rem !important
    }

    .pb-xs-2,
    .py-xs-2 {
        padding-bottom: 0.5rem !important
    }

    .pl-xs-2,
    .px-xs-2 {
        padding-left: 0.5rem !important
    }

    .p-xs-3 {
        padding: 1rem !important
    }

    .pt-xs-3,
    .py-xs-3 {
        padding-top: 1rem !important
    }

    .pr-xs-3,
    .px-xs-3 {
        padding-right: 1rem !important
    }

    .pb-xs-3,
    .py-xs-3 {
        padding-bottom: 1rem !important
    }

    .pl-xs-3,
    .px-xs-3 {
        padding-left: 1rem !important
    }

    .p-xs-4 {
        padding: 1.5rem !important
    }

    .pt-xs-4,
    .py-xs-4 {
        padding-top: 1.5rem !important
    }

    .pr-xs-4,
    .px-xs-4 {
        padding-right: 1.5rem !important
    }

    .pb-xs-4,
    .py-xs-4 {
        padding-bottom: 1.5rem !important
    }

    .pl-xs-4,
    .px-xs-4 {
        padding-left: 1.5rem !important
    }

    .p-xs-5 {
        padding: 3rem !important
    }

    .pt-xs-5,
    .py-xs-5 {
        padding-top: 3rem !important
    }

    .pr-xs-5,
    .px-xs-5 {
        padding-right: 3rem !important
    }

    .pb-xs-5,
    .py-xs-5 {
        padding-bottom: 3rem !important
    }

    .pl-xs-5,
    .px-xs-5 {
        padding-left: 3rem !important
    }

    .m-xs-n1 {
        margin: -0.25rem !important
    }

    .mt-xs-n1,
    .my-xs-n1 {
        margin-top: -0.25rem !important
    }

    .mr-xs-n1,
    .mx-xs-n1 {
        margin-right: -0.25rem !important
    }

    .mb-xs-n1,
    .my-xs-n1 {
        margin-bottom: -0.25rem !important
    }

    .ml-xs-n1,
    .mx-xs-n1 {
        margin-left: -0.25rem !important
    }

    .m-xs-n2 {
        margin: -0.5rem !important
    }

    .mt-xs-n2,
    .my-xs-n2 {
        margin-top: -0.5rem !important
    }

    .mr-xs-n2,
    .mx-xs-n2 {
        margin-right: -0.5rem !important
    }

    .mb-xs-n2,
    .my-xs-n2 {
        margin-bottom: -0.5rem !important
    }

    .ml-xs-n2,
    .mx-xs-n2 {
        margin-left: -0.5rem !important
    }

    .m-xs-n3 {
        margin: -1rem !important
    }

    .mt-xs-n3,
    .my-xs-n3 {
        margin-top: -1rem !important
    }

    .mr-xs-n3,
    .mx-xs-n3 {
        margin-right: -1rem !important
    }

    .mb-xs-n3,
    .my-xs-n3 {
        margin-bottom: -1rem !important
    }

    .ml-xs-n3,
    .mx-xs-n3 {
        margin-left: -1rem !important
    }

    .m-xs-n4 {
        margin: -1.5rem !important
    }

    .mt-xs-n4,
    .my-xs-n4 {
        margin-top: -1.5rem !important
    }

    .mr-xs-n4,
    .mx-xs-n4 {
        margin-right: -1.5rem !important
    }

    .mb-xs-n4,
    .my-xs-n4 {
        margin-bottom: -1.5rem !important
    }

    .ml-xs-n4,
    .mx-xs-n4 {
        margin-left: -1.5rem !important
    }

    .m-xs-n5 {
        margin: -3rem !important
    }

    .mt-xs-n5,
    .my-xs-n5 {
        margin-top: -3rem !important
    }

    .mr-xs-n5,
    .mx-xs-n5 {
        margin-right: -3rem !important
    }

    .mb-xs-n5,
    .my-xs-n5 {
        margin-bottom: -3rem !important
    }

    .ml-xs-n5,
    .mx-xs-n5 {
        margin-left: -3rem !important
    }

    .m-xs-auto {
        margin: auto !important
    }

    .mt-xs-auto,
    .my-xs-auto {
        margin-top: auto !important
    }

    .mr-xs-auto,
    .mx-xs-auto {
        margin-right: auto !important
    }

    .mb-xs-auto,
    .my-xs-auto {
        margin-bottom: auto !important
    }

    .ml-xs-auto,
    .mx-xs-auto {
        margin-left: auto !important
    }
}


/* xx spacing utilities (320px) */
@media (min-width:320px) {
    .m-xx-0 {
        margin: 0 !important
    }

    .mt-xx-0,
    .my-xx-0 {
        margin-top: 0 !important
    }

    .mr-xx-0,
    .mx-xx-0 {
        margin-right: 0 !important
    }

    .mb-xx-0,
    .my-xx-0 {
        margin-bottom: 0 !important
    }

    .ml-xx-0,
    .mx-xx-0 {
        margin-left: 0 !important
    }

    .m-xx-1 {
        margin: 0.25rem !important
    }

    .mt-xx-1,
    .my-xx-1 {
        margin-top: 0.25rem !important
    }

    .mr-xx-1,
    .mx-xx-1 {
        margin-right: 0.25rem !important
    }

    .mb-xx-1,
    .my-xx-1 {
        margin-bottom: 0.25rem !important
    }

    .ml-xx-1,
    .mx-xx-1 {
        margin-left: 0.25rem !important
    }

    .m-xx-2 {
        margin: 0.5rem !important
    }

    .mt-xx-2,
    .my-xx-2 {
        margin-top: 0.5rem !important
    }

    .mr-xx-2,
    .mx-xx-2 {
        margin-right: 0.5rem !important
    }

    .mb-xx-2,
    .my-xx-2 {
        margin-bottom: 0.5rem !important
    }

    .ml-xx-2,
    .mx-xx-2 {
        margin-left: 0.5rem !important
    }

    .m-xx-3 {
        margin: 1rem !important
    }

    .mt-xx-3,
    .my-xx-3 {
        margin-top: 1rem !important
    }

    .mr-xx-3,
    .mx-xx-3 {
        margin-right: 1rem !important
    }

    .mb-xx-3,
    .my-xx-3 {
        margin-bottom: 1rem !important
    }

    .ml-xx-3,
    .mx-xx-3 {
        margin-left: 1rem !important
    }

    .m-xx-4 {
        margin: 1.5rem !important
    }

    .mt-xx-4,
    .my-xx-4 {
        margin-top: 1.5rem !important
    }

    .mr-xx-4,
    .mx-xx-4 {
        margin-right: 1.5rem !important
    }

    .mb-xx-4,
    .my-xx-4 {
        margin-bottom: 1.5rem !important
    }

    .ml-xx-4,
    .mx-xx-4 {
        margin-left: 1.5rem !important
    }

    .m-xx-5 {
        margin: 3rem !important
    }

    .mt-xx-5,
    .my-xx-5 {
        margin-top: 3rem !important
    }

    .mr-xx-5,
    .mx-xx-5 {
        margin-right: 3rem !important
    }

    .mb-xx-5,
    .my-xx-5 {
        margin-bottom: 3rem !important
    }

    .ml-xx-5,
    .mx-xx-5 {
        margin-left: 3rem !important
    }

    .p-xx-0 {
        padding: 0 !important
    }

    .pt-xx-0,
    .py-xx-0 {
        padding-top: 0 !important
    }

    .pr-xx-0,
    .px-xx-0 {
        padding-right: 0 !important
    }

    .pb-xx-0,
    .py-xx-0 {
        padding-bottom: 0 !important
    }

    .pl-xx-0,
    .px-xx-0 {
        padding-left: 0 !important
    }

    .p-xx-1 {
        padding: 0.25rem !important
    }

    .pt-xx-1,
    .py-xx-1 {
        padding-top: 0.25rem !important
    }

    .pr-xx-1,
    .px-xx-1 {
        padding-right: 0.25rem !important
    }

    .pb-xx-1,
    .py-xx-1 {
        padding-bottom: 0.25rem !important
    }

    .pl-xx-1,
    .px-xx-1 {
        padding-left: 0.25rem !important
    }

    .p-xx-2 {
        padding: 0.5rem !important
    }

    .pt-xx-2,
    .py-xx-2 {
        padding-top: 0.5rem !important
    }

    .pr-xx-2,
    .px-xx-2 {
        padding-right: 0.5rem !important
    }

    .pb-xx-2,
    .py-xx-2 {
        padding-bottom: 0.5rem !important
    }

    .pl-xx-2,
    .px-xx-2 {
        padding-left: 0.5rem !important
    }

    .p-xx-3 {
        padding: 1rem !important
    }

    .pt-xx-3,
    .py-xx-3 {
        padding-top: 1rem !important
    }

    .pr-xx-3,
    .px-xx-3 {
        padding-right: 1rem !important
    }

    .pb-xx-3,
    .py-xx-3 {
        padding-bottom: 1rem !important
    }

    .pl-xx-3,
    .px-xx-3 {
        padding-left: 1rem !important
    }

    .p-xx-4 {
        padding: 1.5rem !important
    }

    .pt-xx-4,
    .py-xx-4 {
        padding-top: 1.5rem !important
    }

    .pr-xx-4,
    .px-xx-4 {
        padding-right: 1.5rem !important
    }

    .pb-xx-4,
    .py-xx-4 {
        padding-bottom: 1.5rem !important
    }

    .pl-xx-4,
    .px-xx-4 {
        padding-left: 1.5rem !important
    }

    .p-xx-5 {
        padding: 3rem !important
    }

    .pt-xx-5,
    .py-xx-5 {
        padding-top: 3rem !important
    }

    .pr-xx-5,
    .px-xx-5 {
        padding-right: 3rem !important
    }

    .pb-xx-5,
    .py-xx-5 {
        padding-bottom: 3rem !important
    }

    .pl-xx-5,
    .px-xx-5 {
        padding-left: 3rem !important
    }

    .m-xx-n1 {
        margin: -0.25rem !important
    }

    .mt-xx-n1,
    .my-xx-n1 {
        margin-top: -0.25rem !important
    }

    .mr-xx-n1,
    .mx-xx-n1 {
        margin-right: -0.25rem !important
    }

    .mb-xx-n1,
    .my-xx-n1 {
        margin-bottom: -0.25rem !important
    }

    .ml-xx-n1,
    .mx-xx-n1 {
        margin-left: -0.25rem !important
    }

    .m-xx-n2 {
        margin: -0.5rem !important
    }

    .mt-xx-n2,
    .my-xx-n2 {
        margin-top: -0.5rem !important
    }

    .mr-xx-n2,
    .mx-xx-n2 {
        margin-right: -0.5rem !important
    }

    .mb-xx-n2,
    .my-xx-n2 {
        margin-bottom: -0.5rem !important
    }

    .ml-xx-n2,
    .mx-xx-n2 {
        margin-left: -0.5rem !important
    }

    .m-xx-n3 {
        margin: -1rem !important
    }

    .mt-xx-n3,
    .my-xx-n3 {
        margin-top: -1rem !important
    }

    .mr-xx-n3,
    .mx-xx-n3 {
        margin-right: -1rem !important
    }

    .mb-xx-n3,
    .my-xx-n3 {
        margin-bottom: -1rem !important
    }

    .ml-xx-n3,
    .mx-xx-n3 {
        margin-left: -1rem !important
    }

    .m-xx-n4 {
        margin: -1.5rem !important
    }

    .mt-xx-n4,
    .my-xx-n4 {
        margin-top: -1.5rem !important
    }

    .mr-xx-n4,
    .mx-xx-n4 {
        margin-right: -1.5rem !important
    }

    .mb-xx-n4,
    .my-xx-n4 {
        margin-bottom: -1.5rem !important
    }

    .ml-xx-n4,
    .mx-xx-n4 {
        margin-left: -1.5rem !important
    }

    .m-xx-n5 {
        margin: -3rem !important
    }

    .mt-xx-n5,
    .my-xx-n5 {
        margin-top: -3rem !important
    }

    .mr-xx-n5,
    .mx-xx-n5 {
        margin-right: -3rem !important
    }

    .mb-xx-n5,
    .my-xx-n5 {
        margin-bottom: -3rem !important
    }

    .ml-xx-n5,
    .mx-xx-n5 {
        margin-left: -3rem !important
    }

    .m-xx-auto {
        margin: auto !important
    }

    .mt-xx-auto,
    .my-xx-auto {
        margin-top: auto !important
    }

    .mr-xx-auto,
    .mx-xx-auto {
        margin-right: auto !important
    }

    .mb-xx-auto,
    .my-xx-auto {
        margin-bottom: auto !important
    }

    .ml-xx-auto,
    .mx-xx-auto {
        margin-left: auto !important
    }
}

/* xs spacing utilities (480px) */
@media (min-width:480px) {
    .m-xs-0 {
        margin: 0 !important
    }

    .mt-xs-0,
    .my-xs-0 {
        margin-top: 0 !important
    }

    .mr-xs-0,
    .mx-xs-0 {
        margin-right: 0 !important
    }

    .mb-xs-0,
    .my-xs-0 {
        margin-bottom: 0 !important
    }

    .ml-xs-0,
    .mx-xs-0 {
        margin-left: 0 !important
    }

    .m-xs-1 {
        margin: 0.25rem !important
    }

    .mt-xs-1,
    .my-xs-1 {
        margin-top: 0.25rem !important
    }

    .mr-xs-1,
    .mx-xs-1 {
        margin-right: 0.25rem !important
    }

    .mb-xs-1,
    .my-xs-1 {
        margin-bottom: 0.25rem !important
    }

    .ml-xs-1,
    .mx-xs-1 {
        margin-left: 0.25rem !important
    }

    .m-xs-2 {
        margin: 0.5rem !important
    }

    .mt-xs-2,
    .my-xs-2 {
        margin-top: 0.5rem !important
    }

    .mr-xs-2,
    .mx-xs-2 {
        margin-right: 0.5rem !important
    }

    .mb-xs-2,
    .my-xs-2 {
        margin-bottom: 0.5rem !important
    }

    .ml-xs-2,
    .mx-xs-2 {
        margin-left: 0.5rem !important
    }

    .m-xs-3 {
        margin: 1rem !important
    }

    .mt-xs-3,
    .my-xs-3 {
        margin-top: 1rem !important
    }

    .mr-xs-3,
    .mx-xs-3 {
        margin-right: 1rem !important
    }

    .mb-xs-3,
    .my-xs-3 {
        margin-bottom: 1rem !important
    }

    .ml-xs-3,
    .mx-xs-3 {
        margin-left: 1rem !important
    }

    .m-xs-4 {
        margin: 1.5rem !important
    }

    .mt-xs-4,
    .my-xs-4 {
        margin-top: 1.5rem !important
    }

    .mr-xs-4,
    .mx-xs-4 {
        margin-right: 1.5rem !important
    }

    .mb-xs-4,
    .my-xs-4 {
        margin-bottom: 1.5rem !important
    }

    .ml-xs-4,
    .mx-xs-4 {
        margin-left: 1.5rem !important
    }

    .m-xs-5 {
        margin: 3rem !important
    }

    .mt-xs-5,
    .my-xs-5 {
        margin-top: 3rem !important
    }

    .mr-xs-5,
    .mx-xs-5 {
        margin-right: 3rem !important
    }

    .mb-xs-5,
    .my-xs-5 {
        margin-bottom: 3rem !important
    }

    .ml-xs-5,
    .mx-xs-5 {
        margin-left: 3rem !important
    }

    .p-xs-0 {
        padding: 0 !important
    }

    .pt-xs-0,
    .py-xs-0 {
        padding-top: 0 !important
    }

    .pr-xs-0,
    .px-xs-0 {
        padding-right: 0 !important
    }

    .pb-xs-0,
    .py-xs-0 {
        padding-bottom: 0 !important
    }

    .pl-xs-0,
    .px-xs-0 {
        padding-left: 0 !important
    }

    .p-xs-1 {
        padding: 0.25rem !important
    }

    .pt-xs-1,
    .py-xs-1 {
        padding-top: 0.25rem !important
    }

    .pr-xs-1,
    .px-xs-1 {
        padding-right: 0.25rem !important
    }

    .pb-xs-1,
    .py-xs-1 {
        padding-bottom: 0.25rem !important
    }

    .pl-xs-1,
    .px-xs-1 {
        padding-left: 0.25rem !important
    }

    .p-xs-2 {
        padding: 0.5rem !important
    }

    .pt-xs-2,
    .py-xs-2 {
        padding-top: 0.5rem !important
    }

    .pr-xs-2,
    .px-xs-2 {
        padding-right: 0.5rem !important
    }

    .pb-xs-2,
    .py-xs-2 {
        padding-bottom: 0.5rem !important
    }

    .pl-xs-2,
    .px-xs-2 {
        padding-left: 0.5rem !important
    }

    .p-xs-3 {
        padding: 1rem !important
    }

    .pt-xs-3,
    .py-xs-3 {
        padding-top: 1rem !important
    }

    .pr-xs-3,
    .px-xs-3 {
        padding-right: 1rem !important
    }

    .pb-xs-3,
    .py-xs-3 {
        padding-bottom: 1rem !important
    }

    .pl-xs-3,
    .px-xs-3 {
        padding-left: 1rem !important
    }

    .p-xs-4 {
        padding: 1.5rem !important
    }

    .pt-xs-4,
    .py-xs-4 {
        padding-top: 1.5rem !important
    }

    .pr-xs-4,
    .px-xs-4 {
        padding-right: 1.5rem !important
    }

    .pb-xs-4,
    .py-xs-4 {
        padding-bottom: 1.5rem !important
    }

    .pl-xs-4,
    .px-xs-4 {
        padding-left: 1.5rem !important
    }

    .p-xs-5 {
        padding: 3rem !important
    }

    .pt-xs-5,
    .py-xs-5 {
        padding-top: 3rem !important
    }

    .pr-xs-5,
    .px-xs-5 {
        padding-right: 3rem !important
    }

    .pb-xs-5,
    .py-xs-5 {
        padding-bottom: 3rem !important
    }

    .pl-xs-5,
    .px-xs-5 {
        padding-left: 3rem !important
    }

    .m-xs-n1 {
        margin: -0.25rem !important
    }

    .mt-xs-n1,
    .my-xs-n1 {
        margin-top: -0.25rem !important
    }

    .mr-xs-n1,
    .mx-xs-n1 {
        margin-right: -0.25rem !important
    }

    .mb-xs-n1,
    .my-xs-n1 {
        margin-bottom: -0.25rem !important
    }

    .ml-xs-n1,
    .mx-xs-n1 {
        margin-left: -0.25rem !important
    }

    .m-xs-n2 {
        margin: -0.5rem !important
    }

    .mt-xs-n2,
    .my-xs-n2 {
        margin-top: -0.5rem !important
    }

    .mr-xs-n2,
    .mx-xs-n2 {
        margin-right: -0.5rem !important
    }

    .mb-xs-n2,
    .my-xs-n2 {
        margin-bottom: -0.5rem !important
    }

    .ml-xs-n2,
    .mx-xs-n2 {
        margin-left: -0.5rem !important
    }

    .m-xs-n3 {
        margin: -1rem !important
    }

    .mt-xs-n3,
    .my-xs-n3 {
        margin-top: -1rem !important
    }

    .mr-xs-n3,
    .mx-xs-n3 {
        margin-right: -1rem !important
    }

    .mb-xs-n3,
    .my-xs-n3 {
        margin-bottom: -1rem !important
    }

    .ml-xs-n3,
    .mx-xs-n3 {
        margin-left: -1rem !important
    }

    .m-xs-n4 {
        margin: -1.5rem !important
    }

    .mt-xs-n4,
    .my-xs-n4 {
        margin-top: -1.5rem !important
    }

    .mr-xs-n4,
    .mx-xs-n4 {
        margin-right: -1.5rem !important
    }

    .mb-xs-n4,
    .my-xs-n4 {
        margin-bottom: -1.5rem !important
    }

    .ml-xs-n4,
    .mx-xs-n4 {
        margin-left: -1.5rem !important
    }

    .m-xs-n5 {
        margin: -3rem !important
    }

    .mt-xs-n5,
    .my-xs-n5 {
        margin-top: -3rem !important
    }

    .mr-xs-n5,
    .mx-xs-n5 {
        margin-right: -3rem !important
    }

    .mb-xs-n5,
    .my-xs-n5 {
        margin-bottom: -3rem !important
    }

    .ml-xs-n5,
    .mx-xs-n5 {
        margin-left: -3rem !important
    }

    .m-xs-auto {
        margin: auto !important
    }

    .mt-xs-auto,
    .my-xs-auto {
        margin-top: auto !important
    }

    .mr-xs-auto,
    .mx-xs-auto {
        margin-right: auto !important
    }

    .mb-xs-auto,
    .my-xs-auto {
        margin-bottom: auto !important
    }

    .ml-xs-auto,
    .mx-xs-auto {
        margin-left: auto !important
    }
}