/* ==== Escala y helpers ==== */
:root {
    --spacer: .25rem;
    --sp-0: 0;
    --sp-1: calc(var(--spacer) * 1);
    --sp-2: calc(var(--spacer) * 2); 
    --sp-3: calc(var(--spacer) * 4); 
    --sp-4: calc(var(--spacer) * 6); 
    --sp-5: calc(var(--spacer) * 12);
}

.m-0 {
    margin: var(--sp-0) !important
}

.m-1 {
    margin: var(--sp-1) !important
}

.m-2 {
    margin: var(--sp-2) !important
}

.m-3 {
    margin: var(--sp-3) !important
}

.m-4 {
    margin: var(--sp-4) !important
}

.m-5 {
    margin: var(--sp-5) !important
}

.mt-0 {
    margin-top: var(--sp-0) !important
}

.mt-1 {
    margin-top: var(--sp-1) !important
}

.mt-2 {
    margin-top: var(--sp-2) !important
}

.mt-3 {
    margin-top: var(--sp-3) !important
}

.mt-4 {
    margin-top: var(--sp-4) !important
}

.mt-5 {
    margin-top: var(--sp-5) !important
}

.mb-0 {
    margin-bottom: var(--sp-0) !important
}

.mb-1 {
    margin-bottom: var(--sp-1) !important
}

.mb-2 {
    margin-bottom: var(--sp-2) !important
}

.mb-3 {
    margin-bottom: var(--sp-3) !important
}

.mb-4 {
    margin-bottom: var(--sp-4) !important
}

.mb-5 {
    margin-bottom: var(--sp-5) !important
}

.ms-0 {
    margin-inline-start: var(--sp-0) !important
}

.ms-1 {
    margin-inline-start: var(--sp-1) !important
}

.ms-2 {
    margin-inline-start: var(--sp-2) !important
}

.ms-3 {
    margin-inline-start: var(--sp-3) !important
}

.ms-4 {
    margin-inline-start: var(--sp-4) !important
}

.ms-5 {
    margin-inline-start: var(--sp-5) !important
}

.me-0 {
    margin-inline-end: var(--sp-0) !important
}

.me-1 {
    margin-inline-end: var(--sp-1) !important
}

.me-2 {
    margin-inline-end: var(--sp-2) !important
}

.me-3 {
    margin-inline-end: var(--sp-3) !important
}

.me-4 {
    margin-inline-end: var(--sp-4) !important
}

.me-5 {
    margin-inline-end: var(--sp-5) !important
}

.mx-0 {
    margin-inline: var(--sp-0) !important
}

.mx-1 {
    margin-inline: var(--sp-1) !important
}

.mx-2 {
    margin-inline: var(--sp-2) !important
}

.mx-3 {
    margin-inline: var(--sp-3) !important
}

.mx-4 {
    margin-inline: var(--sp-4) !important
}

.mx-5 {
    margin-inline: var(--sp-5) !important
}

.my-0 {
    margin-block: var(--sp-0) !important
}

.my-1 {
    margin-block: var(--sp-1) !important
}

.my-2 {
    margin-block: var(--sp-2) !important
}

.my-3 {
    margin-block: var(--sp-3) !important
}

.my-4 {
    margin-block: var(--sp-4) !important
}

.my-5 {
    margin-block: var(--sp-5) !important
}

.mx-auto {
    margin-inline: auto !important
}

.my-auto {
    margin-block: auto !important
}

.m-n1 {
    margin: calc(0px - var(--sp-1)) !important;
}

.m-n2 {
    margin: calc(0px - var(--sp-2)) !important;
}

.m-n3 {
    margin: calc(0px - var(--sp-3)) !important;
}

.m-n4 {
    margin: calc(0px - var(--sp-4)) !important;
}

.m-n5 {
    margin: calc(0px - var(--sp-5)) !important;
}

.mt-n1 {
    margin-top: calc(0px - var(--sp-1)) !important;
}

.mt-n2 {
    margin-top: calc(0px - var(--sp-2)) !important;
}

.mt-n3 {
    margin-top: calc(0px - var(--sp-3)) !important;
}

.mt-n4 {
    margin-top: calc(0px - var(--sp-4)) !important;
}

.mt-n5 {
    margin-top: calc(0px - var(--sp-5)) !important;
}

.mb-n1 {
    margin-bottom: calc(0px - var(--sp-1)) !important;
}

.mb-n2 {
    margin-bottom: calc(0px - var(--sp-2)) !important;
}

.mb-n3 {
    margin-bottom: calc(0px - var(--sp-3)) !important;
}

.mb-n4 {
    margin-bottom: calc(0px - var(--sp-4)) !important;
}

.mb-n5 {
    margin-bottom: calc(0px - var(--sp-5)) !important;
}

.ms-n1 {
    margin-inline-start: calc(0px - var(--sp-1)) !important;
}

.ms-n2 {
    margin-inline-start: calc(0px - var(--sp-2)) !important;
}

.ms-n3 {
    margin-inline-start: calc(0px - var(--sp-3)) !important;
}

.ms-n4 {
    margin-inline-start: calc(0px - var(--sp-4)) !important;
}

.ms-n5 {
    margin-inline-start: calc(0px - var(--sp-5)) !important;
}

.me-n1 {
    margin-inline-end: calc(0px - var(--sp-1)) !important;
}

.me-n2 {
    margin-inline-end: calc(0px - var(--sp-2)) !important;
}

.me-n3 {
    margin-inline-end: calc(0px - var(--sp-3)) !important;
}

.me-n4 {
    margin-inline-end: calc(0px - var(--sp-4)) !important;
}

.me-n5 {
    margin-inline-end: calc(0px - var(--sp-5)) !important;
}
.p-0 {
    padding: var(--sp-0) !important
}

.p-1 {
    padding: var(--sp-1) !important
}

.p-2 {
    padding: var(--sp-2) !important
}

.p-3 {
    padding: var(--sp-3) !important
}

.p-4 {
    padding: var(--sp-4) !important
}

.p-5 {
    padding: var(--sp-5) !important
}

.pt-0 {
    padding-top: var(--sp-0) !important
}

.pt-1 {
    padding-top: var(--sp-1) !important
}

.pt-2 {
    padding-top: var(--sp-2) !important
}

.pt-3 {
    padding-top: var(--sp-3) !important
}

.pt-4 {
    padding-top: var(--sp-4) !important
}

.pt-5 {
    padding-top: var(--sp-5) !important
}

.pb-0 {
    padding-bottom: var(--sp-0) !important
}

.pb-1 {
    padding-bottom: var(--sp-1) !important
}

.pb-2 {
    padding-bottom: var(--sp-2) !important
}

.pb-3 {
    padding-bottom: var(--sp-3) !important
}

.pb-4 {
    padding-bottom: var(--sp-4) !important
}

.pb-5 {
    padding-bottom: var(--sp-5) !important
}

.ps-0 {
    padding-inline-start: var(--sp-0) !important
}

.ps-1 {
    padding-inline-start: var(--sp-1) !important
}

.ps-2 {
    padding-inline-start: var(--sp-2) !important
}

.ps-3 {
    padding-inline-start: var(--sp-3) !important
}

.ps-4 {
    padding-inline-start: var(--sp-4) !important
}

.ps-5 {
    padding-inline-start: var(--sp-5) !important
}

.pe-0 {
    padding-inline-end: var(--sp-0) !important
}

.pe-1 {
    padding-inline-end: var(--sp-1) !important
}

.pe-2 {
    padding-inline-end: var(--sp-2) !important
}

.pe-3 {
    padding-inline-end: var(--sp-3) !important
}

.pe-4 {
    padding-inline-end: var(--sp-4) !important
}

.pe-5 {
    padding-inline-end: var(--sp-5) !important
}

.px-0 {
    padding-inline: var(--sp-0) !important
}

.px-1 {
    padding-inline: var(--sp-1) !important
}

.px-2 {
    padding-inline: var(--sp-2) !important
}

.px-3 {
    padding-inline: var(--sp-3) !important
}

.px-4 {
    padding-inline: var(--sp-4) !important
}

.px-5 {
    padding-inline: var(--sp-5) !important
}

.py-0 {
    padding-block: var(--sp-0) !important
}

.py-1 {
    padding-block: var(--sp-1) !important
}

.py-2 {
    padding-block: var(--sp-2) !important
}

.py-3 {
    padding-block: var(--sp-3) !important
}

.py-4 {
    padding-block: var(--sp-4) !important
}

.py-5 {
    padding-block: var(--sp-5) !important
}


@media (min-width:576px) { 
    .m-sm-0 {
        margin: var(--sp-0) !important
    }

    .m-sm-1 {
        margin: var(--sp-1) !important
    }

    .m-sm-2 {
        margin: var(--sp-2) !important
    }

    .m-sm-3 {
        margin: var(--sp-3) !important
    }

    .m-sm-4 {
        margin: var(--sp-4) !important
    }

    .m-sm-5 {
        margin: var(--sp-5) !important
    }

    .mt-sm-0 {
        margin-top: var(--sp-0) !important
    }

    .mt-sm-1 {
        margin-top: var(--sp-1) !important
    }

    .mt-sm-2 {
        margin-top: var(--sp-2) !important
    }

    .mt-sm-3 {
        margin-top: var(--sp-3) !important
    }

    .mt-sm-4 {
        margin-top: var(--sp-4) !important
    }

    .mt-sm-5 {
        margin-top: var(--sp-5) !important
    }

    .mb-sm-0 {
        margin-bottom: var(--sp-0) !important
    }

    .mb-sm-1 {
        margin-bottom: var(--sp-1) !important
    }

    .mb-sm-2 {
        margin-bottom: var(--sp-2) !important
    }

    .mb-sm-3 {
        margin-bottom: var(--sp-3) !important
    }

    .mb-sm-4 {
        margin-bottom: var(--sp-4) !important
    }

    .mb-sm-5 {
        margin-bottom: var(--sp-5) !important
    }

    .ms-sm-0 {
        margin-inline-start: var(--sp-0) !important
    }

    .ms-sm-1 {
        margin-inline-start: var(--sp-1) !important
    }

    .ms-sm-2 {
        margin-inline-start: var(--sp-2) !important
    }

    .ms-sm-3 {
        margin-inline-start: var(--sp-3) !important
    }

    .ms-sm-4 {
        margin-inline-start: var(--sp-4) !important
    }

    .ms-sm-5 {
        margin-inline-start: var(--sp-5) !important
    }

    .me-sm-0 {
        margin-inline-end: var(--sp-0) !important
    }

    .me-sm-1 {
        margin-inline-end: var(--sp-1) !important
    }

    .me-sm-2 {
        margin-inline-end: var(--sp-2) !important
    }

    .me-sm-3 {
        margin-inline-end: var(--sp-3) !important
    }

    .me-sm-4 {
        margin-inline-end: var(--sp-4) !important
    }

    .me-sm-5 {
        margin-inline-end: var(--sp-5) !important
    }

    .mx-sm-0 {
        margin-inline: var(--sp-0) !important
    }

    .mx-sm-1 {
        margin-inline: var(--sp-1) !important
    }

    .mx-sm-2 {
        margin-inline: var(--sp-2) !important
    }

    .mx-sm-3 {
        margin-inline: var(--sp-3) !important
    }

    .mx-sm-4 {
        margin-inline: var(--sp-4) !important
    }

    .mx-sm-5 {
        margin-inline: var(--sp-5) !important
    }

    .my-sm-0 {
        margin-block: var(--sp-0) !important
    }

    .my-sm-1 {
        margin-block: var(--sp-1) !important
    }

    .my-sm-2 {
        margin-block: var(--sp-2) !important
    }

    .my-sm-3 {
        margin-block: var(--sp-3) !important
    }

    .my-sm-4 {
        margin-block: var(--sp-4) !important
    }

    .my-sm-5 {
        margin-block: var(--sp-5) !important
    }

    .p-sm-0 {
        padding: var(--sp-0) !important
    }

    .p-sm-1 {
        padding: var(--sp-1) !important
    }

    .p-sm-2 {
        padding: var(--sp-2) !important
    }

    .p-sm-3 {
        padding: var(--sp-3) !important
    }

    .p-sm-4 {
        padding: var(--sp-4) !important
    }

    .p-sm-5 {
        padding: var(--sp-5) !important
    }

    .pt-sm-0 {
        padding-top: var(--sp-0) !important
    }

    .pt-sm-1 {
        padding-top: var(--sp-1) !important
    }

    .pt-sm-2 {
        padding-top: var(--sp-2) !important
    }

    .pt-sm-3 {
        padding-top: var(--sp-3) !important
    }

    .pt-sm-4 {
        padding-top: var(--sp-4) !important
    }

    .pt-sm-5 {
        padding-top: var(--sp-5) !important
    }

    .pb-sm-0 {
        padding-bottom: var(--sp-0) !important
    }

    .pb-sm-1 {
        padding-bottom: var(--sp-1) !important
    }

    .pb-sm-2 {
        padding-bottom: var(--sp-2) !important
    }

    .pb-sm-3 {
        padding-bottom: var(--sp-3) !important
    }

    .pb-sm-4 {
        padding-bottom: var(--sp-4) !important
    }

    .pb-sm-5 {
        padding-bottom: var(--sp-5) !important
    }

    .ps-sm-0 {
        padding-inline-start: var(--sp-0) !important
    }

    .ps-sm-1 {
        padding-inline-start: var(--sp-1) !important
    }

    .ps-sm-2 {
        padding-inline-start: var(--sp-2) !important
    }

    .ps-sm-3 {
        padding-inline-start: var(--sp-3) !important
    }

    .ps-sm-4 {
        padding-inline-start: var(--sp-4) !important
    }

    .ps-sm-5 {
        padding-inline-start: var(--sp-5) !important
    }

    .pe-sm-0 {
        padding-inline-end: var(--sp-0) !important
    }

    .pe-sm-1 {
        padding-inline-end: var(--sp-1) !important
    }

    .pe-sm-2 {
        padding-inline-end: var(--sp-2) !important
    }

    .pe-sm-3 {
        padding-inline-end: var(--sp-3) !important
    }

    .pe-sm-4 {
        padding-inline-end: var(--sp-4) !important
    }

    .pe-sm-5 {
        padding-inline-end: var(--sp-5) !important
    }

    .px-sm-0 {
        padding-inline: var(--sp-0) !important
    }

    .px-sm-1 {
        padding-inline: var(--sp-1) !important
    }

    .px-sm-2 {
        padding-inline: var(--sp-2) !important
    }

    .px-sm-3 {
        padding-inline: var(--sp-3) !important
    }

    .px-sm-4 {
        padding-inline: var(--sp-4) !important
    }

    .px-sm-5 {
        padding-inline: var(--sp-5) !important
    }

    .py-sm-0 {
        padding-block: var(--sp-0) !important
    }

    .py-sm-1 {
        padding-block: var(--sp-1) !important
    }

    .py-sm-2 {
        padding-block: var(--sp-2) !important
    }

    .py-sm-3 {
        padding-block: var(--sp-3) !important
    }

    .py-sm-4 {
        padding-block: var(--sp-4) !important
    }

    .py-sm-5 {
        padding-block: var(--sp-5) !important
    }
}

/* =========================
   Display helpers (como Bootstrap)
   ========================= */
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

/* Dirección de eje (main axis) */
.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

/* Wrap */
.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

/* =========================
   Auto margins (centrado de bloques)
   ========================= */
.m-auto {
    margin: auto !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-auto {
    margin-inline-end: auto !important;
}
/* RTL friendly */
.mb-auto {
    margin-bottom: auto !important;
}

.ms-auto {
    margin-inline-start: auto !important;
}
/* RTL friendly */

/* =========================
   Justify content (eje principal)
   ========================= */
.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.justify-content-evenly {
    justify-content: space-evenly !important;
}

/* =========================
   Align items (eje cruzado)
   ========================= */
.align-items-start {
    align-items: flex-start !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

/* =========================
   Align self (por elemento)
   ========================= */
.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

/* =========================
   Align content (multi-línea en flex-wrap)
   ========================= */
.align-content-start {
    align-content: flex-start !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

/* =========================
   Vertical align (inline/inline-block/table-cell)
   ========================= */
.align-top {
    vertical-align: top !important;
}

.align-middle {
    vertical-align: middle !important;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-text-top {
    vertical-align: text-top !important;
}

.align-text-bottom {
    vertical-align: text-bottom !important;
}

.align-baseline {
    vertical-align: baseline !important;
}

/* =========================
   Responsive variants (sm/md/lg/xl)
   ========================= */
@media (min-width:576px) {
    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }

    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .justify-content-sm-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-sm-start {
        align-items: flex-start !important;
    }

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-end {
        align-items: flex-end !important;
    }

    .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .align-content-sm-start {
        align-content: flex-start !important;
    }

    .align-content-sm-center {
        align-content: center !important;
    }

    .align-content-sm-end {
        align-content: flex-end !important;
    }

    .align-content-sm-between {
        align-content: space-between !important;
    }

    .align-content-sm-around {
        align-content: space-around !important;
    }

    .align-content-sm-stretch {
        align-content: stretch !important;
    }

    .align-self-sm-auto {
        align-self: auto !important;
    }

    .align-self-sm-start {
        align-self: flex-start !important;
    }

    .align-self-sm-center {
        align-self: center !important;
    }

    .align-self-sm-end {
        align-self: flex-end !important;
    }

    .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .align-self-sm-stretch {
        align-self: stretch !important;
    }

    .m-sm-auto {
        margin: auto !important;
    }

    .mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-sm-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-sm-auto {
        margin-top: auto !important;
    }

    .mb-sm-auto {
        margin-bottom: auto !important;
    }

    .ms-sm-auto {
        margin-inline-start: auto !important;
    }

    .me-sm-auto {
        margin-inline-end: auto !important;
    }
}

@media (min-width:768px) {
    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }

    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

    .justify-content-md-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-md-start {
        align-items: flex-start !important;
    }

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-end {
        align-items: flex-end !important;
    }

    .align-items-md-baseline {
        align-items: baseline !important;
    }

    .align-items-md-stretch {
        align-items: stretch !important;
    }

    .align-content-md-start {
        align-content: flex-start !important;
    }

    .align-content-md-center {
        align-content: center !important;
    }

    .align-content-md-end {
        align-content: flex-end !important;
    }

    .align-content-md-between {
        align-content: space-between !important;
    }

    .align-content-md-around {
        align-content: space-around !important;
    }

    .align-content-md-stretch {
        align-content: stretch !important;
    }

    .align-self-md-auto {
        align-self: auto !important;
    }

    .align-self-md-start {
        align-self: flex-start !important;
    }

    .align-self-md-center {
        align-self: center !important;
    }

    .align-self-md-end {
        align-self: flex-end !important;
    }

    .align-self-md-baseline {
        align-self: baseline !important;
    }

    .align-self-md-stretch {
        align-self: stretch !important;
    }

    .m-md-auto {
        margin: auto !important;
    }

    .mx-md-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-md-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-md-auto {
        margin-top: auto !important;
    }

    .mb-md-auto {
        margin-bottom: auto !important;
    }

    .ms-md-auto {
        margin-inline-start: auto !important;
    }

    .me-md-auto {
        margin-inline-end: auto !important;
    }
}

@media (min-width:992px) {
    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }

    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .justify-content-lg-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-end {
        align-items: flex-end !important;
    }

    .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .align-content-lg-start {
        align-content: flex-start !important;
    }

    .align-content-lg-center {
        align-content: center !important;
    }

    .align-content-lg-end {
        align-content: flex-end !important;
    }

    .align-content-lg-between {
        align-content: space-between !important;
    }

    .align-content-lg-around {
        align-content: space-around !important;
    }

    .align-content-lg-stretch {
        align-content: stretch !important;
    }

    .align-self-lg-auto {
        align-self: auto !important;
    }

    .align-self-lg-start {
        align-self: flex-start !important;
    }

    .align-self-lg-center {
        align-self: center !important;
    }

    .align-self-lg-end {
        align-self: flex-end !important;
    }

    .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .align-self-lg-stretch {
        align-self: stretch !important;
    }

    .m-lg-auto {
        margin: auto !important;
    }

    .mx-lg-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-lg-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-lg-auto {
        margin-top: auto !important;
    }

    .mb-lg-auto {
        margin-bottom: auto !important;
    }

    .ms-lg-auto {
        margin-inline-start: auto !important;
    }

    .me-lg-auto {
        margin-inline-end: auto !important;
    }
}

@media (min-width:1200px) {
    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }

    .flex-xl-row {
        flex-direction: row !important;
    }

    .flex-xl-column {
        flex-direction: column !important;
    }

    .justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .justify-content-xl-center {
        justify-content: center !important;
    }

    .justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .justify-content-xl-evenly {
        justify-content: space-evenly !important;
    }

    .align-items-xl-start {
        align-items: flex-start !important;
    }

    .align-items-xl-center {
        align-items: center !important;
    }

    .align-items-xl-end {
        align-items: flex-end !important;
    }

    .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .align-content-xl-start {
        align-content: flex-start !important;
    }

    .align-content-xl-center {
        align-content: center !important;
    }

    .align-content-xl-end {
        align-content: flex-end !important;
    }

    .align-content-xl-between {
        align-content: space-between !important;
    }

    .align-content-xl-around {
        align-content: space-around !important;
    }

    .align-content-xl-stretch {
        align-content: stretch !important;
    }

    .align-self-xl-auto {
        align-self: auto !important;
    }

    .align-self-xl-start {
        align-self: flex-start !important;
    }

    .align-self-xl-center {
        align-self: center !important;
    }

    .align-self-xl-end {
        align-self: flex-end !important;
    }

    .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .align-self-xl-stretch {
        align-self: stretch !important;
    }

    .m-xl-auto {
        margin: auto !important;
    }

    .mx-xl-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .my-xl-auto {
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    .mt-xl-auto {
        margin-top: auto !important;
    }

    .mb-xl-auto {
        margin-bottom: auto !important;
    }

    .ms-xl-auto {
        margin-inline-start: auto !important;
    }

    .me-xl-auto {
        margin-inline-end: auto !important;
    }
}