/* -------------
    SOMMAIRE
------------- */

/*
    @AUTHOR : Nicolas BOUDOT

    PROPRIÉTÉ : DISPLAY FLEX
    Styles des propriétés liés à la propriété display: flex;
*/

/*
    01 - XS
        Display
        Flex-wrap
        Flex-direction
        Justify-content
        Align-items
        Flex
            Flex-grow
            Flex-shrink
            Flex-basis
        Gap
            Row
            Column
        Order
    02 - SM
    03 - MD
    04 - LG
    05 - XL
    06 - XXL
*/

/*
    @infos : La dernière déclaration d'une suite de déclarations (ex: d-flex {}), est celle de Bootstrap V5
    afin de ne pas perdre les traces de nommage de celui-ci. Les autres sont des raccourcis
*/



/* -----------------
    01 - XS
        Display
----------------- */

.d-flex {
    display: flex;
}

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



/* -----------------
    01 - XS
        Flex-wrap
----------------- */

.fw-nowrap,
.flex-nowrap {
    flex-wrap: nowrap;
}

.fw-wrap,
.flex-wrap {
    flex-wrap: wrap;
}

.fw-wrap-reverse,
.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}



/* -----------------
    01 - XS
        Flex-direction
----------------- */

.fd-row,
.flex-row {
    flex-direction: row;
}

.fd-row-reverse,
.flex-row-reverse {
    flex-direction: row-reverse;
}

.fd-column,
.flex-column {
    flex-direction: column;
}

.fd-column-reverse,
.flex-column-reverse {
    flex-direction: column-reverse;
}



/* -----------------
    01 - XS
        Justify-content
----------------- */

.jc-flex-start,
.justify-content-flex-start {
    justify-content: flex-start;
}

.jc-center,
.justify-content-center {
    justify-content: center;
}

.jc-flex-end,
.justify-content-flex-end {
    justify-content: flex-end;
}

.jc-space-around,
.justify-content-around {
    justify-content: space-around;
}

.jc-space-between,
.justify-content-between {
    justify-content: space-between;
}

.jc-space-evenly,
.justify-content-evenly {
    justify-content: space-evenly;
}



/* -----------------
    01 - XS
        Align-items
----------------- */

.ai-flex-start,
.align-items-start {
    align-items: flex-start;
}

.ai-flex-end,
.align-items-end {
    align-items: flex-end;
}

.ai-center,
.align-items-center {
    align-items: center;
}

.ai-baseline,
.align-items-baseline {
    align-items: baseline;
}

.ai-stretch,
.align-items-stretch {
    align-items: stretch;
}



/* -----------------
    01 - XS
        Align-content
----------------- */

.ac-flex-start,
.align-content-start {
    align-content: flex-start;
}

.ac-flex-end,
.align-content-end {
    align-content: flex-end;
}

.ac-center,
.align-content-center {
    align-content: center;
}

.ac-space-between,
.align-content-between {
    align-content: space-between;
}

.ac-space-around,
.align-content-around {
    align-content: space-around;
}

.ac-stretch,
.align-content-stretch {
    align-content: stretch;
}



/* -----------------
    01 - XS
        Align-self
----------------- */

.as-auto,
.align-self-auto {
    align-self: auto;
}

.as-flex-start,
.align-self-start {
    align-self: flex-start;
}

.as-flex-end,
.align-self-end {
    align-self: flex-end;
}

.as-center,
.align-self-center {
    align-self: center;
}

.as-baseline,
.align-self-baseline {
    align-self: baseline;
}

.as-stretch,
.align-self-stretch {
    align-self: stretch;
}



/* -----------------
    01 - XS
        Flex
----------------- */

.f-1-1-auto,
.flex-fill {
    flex: 1 1 auto;
}



/* -----------------
    01 - XS
        Flex
            Flex-grow
----------------- */

.fg-0,
.flex-grow-0 {
    flex-grow: 0;
}

.fg-1,
.flex-grow-1 {
    flex-grow: 1;
}



/* -----------------
    01 - XS
        Flex
            Flex-shrink
----------------- */

.fs-0,
.flex-shrink-0 {
    flex-shrink: 0;
}

.fs-1,
.flex-shrink-1 {
    flex-shrink: 1;
}



/* -----------------
    01 - XS
        Flex
            Flex-basis
----------------- */

.fb-auto,
.flex-basis-auto {
    flex-basis: auto;
}

.fb-0,
.flex-basis-0 {
    flex-basis: 0;
}

.fb-50,
.flex-basis-50 {
    flex-basis: 50%;
}

.fb-100,
.flex-basis-100 {
    flex-basis: 100%;
}



/* -----------------
    01 - XS
        Gap
----------------- */

.g-3px {
    gap: .3rem;
}

.g-5px {
    gap: .5rem;
}

.g-8px {
    gap: .8rem;
}

.g-10px {
    gap: 1rem;
}

.g-15px {
    gap: 1.5rem;
}

.g-30px {
    gap: 3rem;
}

.g-40px {
    gap: 4rem;
}

.g-50px {
    gap: 5rem;
}

.g-60px {
    gap: 6rem;
}

.g-70px {
    gap: 7rem;
}

.g-80px {
    gap: 8rem;
}

.g-90px {
    gap: 9rem;
}

.g-100px {
    gap: 10rem;
}



/* -----------------
    01 - XS
        Gap
            Row
----------------- */

.rg-3px {
    row-gap: .3rem;
}

.rg-5px {
    row-gap: .5rem;
}

.rg-8px {
    row-gap: .8rem;
}

.rg-10px {
    row-gap: 1rem;
}

.rg-15px {
    row-gap: 1.5rem;
}

.rg-30px {
    row-gap: 3rem;
}

.rg-40px {
    row-gap: 4rem;
}

.rg-50px {
    row-gap: 5rem;
}

.rg-60px {
    row-gap: 6rem;
}

.rg-70px {
    row-gap: 7rem;
}

.rg-80px {
    row-gap: 8rem;
}

.rg-90px {
    row-gap: 9rem;
}

.rg-100px {
    row-gap: 10rem;
}



/* -----------------
    01 - XS
        Gap
            Column
----------------- */

.cg-3px,
.column-gap-1 {
    column-gap: .3rem;
}

.cg-5px,
.column-gap-2 {
    column-gap: .5rem;
}

.cg-8px {
    column-gap: .8rem;
}

.cg-10px,
.column-gap-3 {
    column-gap: 1rem;
}

.cg-15px,
.column-gap-4 {
    column-gap: 1.5rem;
}

.cg-30px,
.column-gap-5 {
    column-gap: 3rem;
}

.cg-40px {
    column-gap: 4rem;
}

.cg-50px {
    column-gap: 5rem;
}

.cg-60px {
    column-gap: 6rem;
}

.cg-70px {
    column-gap: 7rem;
}

.cg-80px {
    column-gap: 8rem;
}

.cg-90px {
    column-gap: 9rem;
}

.cg-100px {
    column-gap: 10rem;
}



/* -----------------
    01 - XS
        Order
----------------- */

.o-n1,
.order-n1,
.order-first {
    order: -1;
}

.o-0,
.order-0 {
    order: 0;
}

.o-1,
.order-1,
.order-last {
    order: 1;
}



/* -----------------
    02 - SM
        Display
----------------- */

@media (min-width: 576px) {
    .d-sm-flex {
        display: flex;
    }
}



/* -----------------
    02 - SM
        Flex-wrap
----------------- */

@media (min-width: 576px) {
    .fw-sm-nowrap,
    .flex-sm-nowrap {
        flex-wrap: nowrap;
    }

    .fw-sm-wrap,
    .flex-sm-wrap {
        flex-wrap: wrap;
    }

    .fw-sm-wrap-reverse,
    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
}


/* -----------------
    02 - SM
        Flex-direction
----------------- */

@media (min-width: 576px) {
    .fd-sm-row,
    .flex-sm-row {
        flex-direction: row;
    }

    .fd-sm-row-reverse,
    .flex-sm-row-reverse {
        flex-direction: row-reverse;
    }

    .fd-sm-column,
    .flex-sm-column {
        flex-direction: column;
    }

    .fd-sm-column-reverse,
    .flex-sm-column-reverse {
        flex-direction: column-reverse;
    }
}


/* -----------------
    02 - SM
        Justify-content
----------------- */

@media (min-width: 576px) {
    .jc-sm-flex-start,
    .justify-content-sm-flex-start {
        justify-content: flex-start;
    }

    .jc-sm-center,
    .justify-content-sm-center {
        justify-content: center;
    }

    .jc-sm-flex-end,
    .justify-content-sm-flex-end {
        justify-content: flex-end;
    }

    .jc-sm-space-around,
    .justify-content-sm-around {
        justify-content: space-around;
    }

    .jc-sm-space-between,
    .justify-content-sm-between {
        justify-content: space-between;
    }

    .jc-sm-space-evenly,
    .justify-content-sm-evenly {
        justify-content: space-evenly;
    }
}



/* -----------------
    02 - SM
        Align-items
----------------- */

@media (min-width: 576px) {
    .ai-sm-flex-start,
    .align-items-sm-start {
        align-items: flex-start;
    }

    .ai-sm-flex-end,
    .align-items-sm-end {
        align-items: flex-end;
    }

    .ai-sm-center,
    .align-items-sm-center {
        align-items: center;
    }

    .ai-sm-baseline,
    .align-items-sm-baseline {
        align-items: baseline;
    }

    .ai-sm-stretch,
    .align-items-sm-stretch {
        align-items: stretch;
    }
}



/* -----------------
    02 - SM
        Align-content
----------------- */

@media (min-width: 576px) {
    .ac-sm-flex-start,
    .align-content-sm-start {
        align-content: flex-start;
    }

    .ac-sm-flex-end,
    .align-content-sm-end {
        align-content: flex-end;
    }

    .ac-sm-center,
    .align-content-sm-center {
        align-content: center;
    }

    .ac-sm-space-between,
    .align-content-sm-between {
        align-content: space-between;
    }

    .ac-sm-space-around,
    .align-content-sm-around {
        align-content: space-around;
    }

    .ac-sm-stretch,
    .align-content-sm-stretch {
        align-content: stretch;
    }
}


/* -----------------
    02 - SM
        Align-self
----------------- */

@media (min-width: 576px) {
    .as-sm-auto,
    .align-self-sm-auto {
        align-self: auto;
    }

    .as-sm-flex-start,
    .align-self-sm-start {
        align-self: flex-start;
    }

    .as-sm-flex-end,
    .align-self-sm-end {
        align-self: flex-end;
    }

    .as-sm-center,
    .align-self-sm-center {
        align-self: center;
    }

    .as-sm-baseline,
    .align-self-sm-baseline {
        align-self: baseline;
    }

    .as-sm-stretch,
    .align-self-sm-stretch {
        align-self: stretch;
    }
}



/* -----------------
    02 - SM
        Flex
----------------- */

@media (min-width: 576px) {
    .f-sm-1-1-auto,
    .flex-sm-fill {
        flex: 1 1 auto;
    }
}



/* ----------------
    02 - SM
        Flex
            Flex-grow
----------------- */

@media (min-width: 576px) {
    .fg-sm-0,
    .flex-grow-sm-0 {
        flex-grow: 0;
    }

    .fg-sm-1,
    .flex-grow-sm-1 {
        flex-grow: 1;
    }
}



/* ----------------
    02 - SM
        Flex
            Flex-shrink
----------------- */

@media (min-width: 576px) {
    .fs-sm-0,
    .flex-shrink-sm-0 {
        flex-shrink: 0;
    }

    .fs-sm-1,
    .flex-shrink-sm-1 {
        flex-shrink: 1;
    }
}



/* ----------------
    02 - SM
        Flex
            Flex-basis
----------------- */

@media (min-width: 576px) {
    .fb-sm-auto,
    .flex-basis-sm-auto {
        flex-basis: auto;
    }

    .fb-sm-0,
    .flex-basis-sm-0 {
        flex-basis: 0;
    }

    .fb-sm-50,
    .flex-basis-sm-50 {
        flex-basis: 50%;
    }

    .fb-sm-100,
    .flex-basis-sm-100 {
        flex-basis: 100%;
    }
}



/* ----------------
    02 - SM
        Gap
----------------- */

@media (min-width: 576px) {
    .g-sm-3px {
        gap: .3rem;
    }

    .g-sm-5px {
        gap: .5rem;
    }

    .g-sm-8px {
        gap: .8rem;
    }

    .g-sm-10px {
        gap: 1rem;
    }

    .g-sm-15px {
        gap: 1.5rem;
    }

    .g-sm-30px {
        gap: 3rem;
    }

    .g-sm-40px {
        gap: 4rem;
    }

    .g-sm-50px {
        gap: 5rem;
    }

    .g-sm-60px {
        gap: 6rem;
    }

    .g-sm-70px {
        gap: 7rem;
    }

    .g-sm-80px {
        gap: 8rem;
    }

    .g-sm-90px {
        gap: 9rem;
    }

    .g-sm-100px {
        gap: 10rem;
    }
}



/* ----------------
    02 - SM
        Gap
            Row
----------------- */

@media (min-width: 576px) {
    .rg-sm-3px {
        row-gap: .3rem;
    }

    .rg-sm-5px {
        row-gap: .5rem;
    }

    .rg-sm-8px {
        row-gap: .8rem;
    }

    .rg-sm-10px {
        row-gap: 1rem;
    }

    .rg-sm-15px {
        row-gap: 1.5rem;
    }

    .rg-sm-30px {
        row-gap: 3rem;
    }

    .rg-sm-40px {
        row-gap: 4rem;
    }

    .rg-sm-50px {
        row-gap: 5rem;
    }

    .rg-sm-60px {
        row-gap: 6rem;
    }

    .rg-sm-70px {
        row-gap: 7rem;
    }

    .rg-sm-80px {
        row-gap: 8rem;
    }

    .rg-sm-90px {
        row-gap: 9rem;
    }

    .rg-sm-100px {
        row-gap: 10rem;
    }
}



/* ----------------
    02 - SM
        Gap
            Column
----------------- */

@media (min-width: 576px) {
    .cg-sm-3px,
    .column-gap-sm-1 {
        column-gap: .3rem;
    }

    .cg-sm-5px,
    .column-gap-sm-2 {
        column-gap: .5rem;
    }

    .cg-sm-8px {
        column-gap: .8rem;
    }

    .cg-sm-10px,
    .column-gap-sm-3 {
        column-gap: 1rem;
    }

    .cg-sm-15px,
    .column-gap-sm-4 {
        column-gap: 1.5rem;
    }

    .cg-sm-30px,
    .column-gap-sm-5 {
        column-gap: 3rem;
    }

    .cg-sm-40px {
        column-gap: 4rem;
    }

    .cg-sm-50px {
        column-gap: 5rem;
    }

    .cg-sm-60px {
        column-gap: 6rem;
    }

    .cg-sm-70px {
        column-gap: 7rem;
    }

    .cg-sm-80px {
        column-gap: 8rem;
    }

    .cg-sm-90px {
        column-gap: 9rem;
    }

    .cg-sm-100px {
        column-gap: 10rem;
    }
}



/* ----------------
    02 - SM
        Order
----------------- */

@media (min-width: 576px) {
    .o-sm-n1,
    .order-sm-n1,
    .order-sm-first {
        order: -1;
    }

    .o-sm-0,
    .order-sm-0 {
        order: 0;
    }

    .o-sm-1,
    .order-sm-1 {
        order: 1;
    }
}


/* -----------------
    03 - MD
        Display
----------------- */

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



/* -----------------
    03 - MD
        Flex-wrap
----------------- */

@media (min-width: 768px) {
    .fw-md-nowrap,
    .flex-md-nowrap {
        flex-wrap: nowrap;
    }

    .fw-md-wrap,
    .flex-md-wrap {
        flex-wrap: wrap;
    }

    .fw-md-wrap-reverse,
    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
}


/* -----------------
    03 - MD
        Flex-direction
----------------- */

@media (min-width: 768px) {
    .fd-md-row,
    .flex-md-row {
        flex-direction: row;
    }

    .fd-md-row-reverse,
    .flex-md-row-reverse {
        flex-direction: row-reverse;
    }

    .fd-md-column,
    .flex-md-column {
        flex-direction: column;
    }

    .fd-md-column-reverse,
    .flex-md-column-reverse {
        flex-direction: column-reverse;
    }
}


/* -----------------
    03 - MD
        Justify-content
----------------- */

@media (min-width: 768px) {
    .jc-md-flex-start,
    .justify-content-md-flex-start {
        justify-content: flex-start;
    }

    .jc-md-center,
    .justify-content-md-center {
        justify-content: center;
    }

    .jc-md-flex-end,
    .justify-content-md-flex-end {
        justify-content: flex-end;
    }

    .jc-md-space-around,
    .justify-content-md-around {
        justify-content: space-around;
    }

    .jc-md-space-between,
    .justify-content-md-between {
        justify-content: space-between;
    }

    .jc-md-space-evenly,
    .justify-content-md-evenly {
        justify-content: space-evenly;
    }
}



/* -----------------
    03 - MD
        Align-items
----------------- */

@media (min-width: 768px) {
    .ai-md-flex-start,
    .align-items-md-start {
        align-items: flex-start;
    }

    .ai-md-flex-end,
    .align-items-md-end {
        align-items: flex-end;
    }

    .ai-md-center,
    .align-items-md-center {
        align-items: center;
    }

    .ai-md-baseline,
    .align-items-md-baseline {
        align-items: baseline;
    }

    .ai-md-stretch,
    .align-items-md-stretch {
        align-items: stretch;
    }
}



/* -----------------
    03 - MD
        Align-content
----------------- */

@media (min-width: 768px) {
    .ac-md-flex-start,
    .align-content-md-start {
        align-content: flex-start;
    }

    .ac-md-flex-end,
    .align-content-md-end {
        align-content: flex-end;
    }

    .ac-md-center,
    .align-content-md-center {
        align-content: center;
    }

    .ac-md-space-between,
    .align-content-md-between {
        align-content: space-between;
    }

    .ac-md-space-around,
    .align-content-md-around {
        align-content: space-around;
    }

    .ac-md-stretch,
    .align-content-md-stretch {
        align-content: stretch;
    }
}


/* -----------------
    03 - MD
        Align-self
----------------- */

@media (min-width: 768px) {
    .as-md-auto,
    .align-self-md-auto {
        align-self: auto;
    }

    .as-md-flex-start,
    .align-self-md-start {
        align-self: flex-start;
    }

    .as-md-flex-end,
    .align-self-md-end {
        align-self: flex-end;
    }

    .as-md-center,
    .align-self-md-center {
        align-self: center;
    }

    .as-md-baseline,
    .align-self-md-baseline {
        align-self: baseline;
    }

    .as-md-stretch,
    .align-self-md-stretch {
        align-self: stretch;
    }
}



/* -----------------
    03 - MD
        Flex
----------------- */

@media (min-width: 768px) {
    .f-md-1-1-auto,
    .flex-md-fill {
        flex: 1 1 auto;
    }
}



/* ----------------
    03 - MD
        Flex
            Flex-grow
----------------- */

@media (min-width: 768px) {
    .fg-md-0,
    .flex-grow-md-0 {
        flex-grow: 0;
    }

    .fg-md-1,
    .flex-grow-md-1 {
        flex-grow: 1;
    }
}



/* ----------------
    03 - MD
        Flex
            Flex-shrink
----------------- */

@media (min-width: 768px) {
    .fs-md-0,
    .flex-shrink-md-0 {
        flex-shrink: 0;
    }

    .fs-md-1,
    .flex-shrink-md-1 {
        flex-shrink: 1;
    }
}



/* ----------------
    03 - MD
        Flex
            Flex-basis
----------------- */

@media (min-width: 768px) {
    .fb-md-auto,
    .flex-basis-md-auto {
        flex-basis: auto;
    }

    .fb-md-0,
    .flex-basis-md-0 {
        flex-basis: 0;
    }

    .fb-md-50,
    .flex-basis-md-50 {
        flex-basis: 50%;
    }

    .fb-md-100,
    .flex-basis-md-100 {
        flex-basis: 100%;
    }
}



/* ----------------
    03 - MD
        Gap
----------------- */

@media (min-width: 768px) {
    .g-md-3px {
        gap: .3rem;
    }

    .g-md-5px {
        gap: .5rem;
    }

    .g-md-8px {
        gap: .8rem;
    }

    .g-md-10px {
        gap: 1rem;
    }

    .g-md-15px {
        gap: 1.5rem;
    }

    .g-md-30px {
        gap: 3rem;
    }

    .g-md-40px {
        gap: 4rem;
    }

    .g-md-50px {
        gap: 5rem;
    }

    .g-md-60px {
        gap: 6rem;
    }

    .g-md-70px {
        gap: 7rem;
    }

    .g-md-80px {
        gap: 8rem;
    }

    .g-md-90px {
        gap: 9rem;
    }

    .g-md-100px {
        gap: 10rem;
    }
}



/* ----------------
    03 - MD
        Gap
            Row
----------------- */

@media (min-width: 768px) {
    .rg-md-3px {
        row-gap: .3rem;
    }

    .rg-md-5px {
        row-gap: .5rem;
    }

    .rg-md-8px {
        row-gap: .8rem;
    }

    .rg-md-10px {
        row-gap: 1rem;
    }

    .rg-md-15px {
        row-gap: 1.5rem;
    }

    .rg-md-30px {
        row-gap: 3rem;
    }

    .rg-md-40px {
        row-gap: 4rem;
    }

    .rg-md-50px {
        row-gap: 5rem;
    }

    .rg-md-60px {
        row-gap: 6rem;
    }

    .rg-md-70px {
        row-gap: 7rem;
    }

    .rg-md-80px {
        row-gap: 8rem;
    }

    .rg-md-90px {
        row-gap: 9rem;
    }

    .rg-md-100px {
        row-gap: 10rem;
    }
}



/* ----------------
    03 - MD
        Gap
            Column
----------------- */

@media (min-width: 768px) {
    .cg-md-3px,
    .column-gap-md-1 {
        column-gap: .3rem;
    }

    .cg-md-5px,
    .column-gap-md-2 {
        column-gap: .5rem;
    }

    .cg-md-8px {
        column-gap: .8rem;
    }

    .cg-md-10px,
    .column-gap-md-3 {
        column-gap: 1rem;
    }

    .cg-md-15px,
    .column-gap-md-4 {
        column-gap: 1.5rem;
    }

    .cg-md-30px,
    .column-gap-md-5 {
        column-gap: 3rem;
    }

    .cg-md-40px {
        column-gap: 4rem;
    }

    .cg-md-50px {
        column-gap: 5rem;
    }

    .cg-md-60px {
        column-gap: 6rem;
    }

    .cg-md-70px {
        column-gap: 7rem;
    }

    .cg-md-80px {
        column-gap: 8rem;
    }

    .cg-md-90px {
        column-gap: 9rem;
    }

    .cg-md-100px {
        column-gap: 10rem;
    }
}



/* ----------------
    03 - MD
        Order
----------------- */

@media (min-width: 768px) {
    .o-md-n1,
    .order-md-n1,
    .order-md-first {
        order: -1;
    }

    .o-md-0,
    .order-md-0 {
        order: 0;
    }

    .o-md-1,
    .order-md-1 {
        order: 1;
    }
}



/* -----------------
    04 - LG
        Display
----------------- */

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



/* -----------------
    04 - LG
        Flex-wrap
----------------- */

@media (min-width: 992px) {
    .fw-lg-nowrap,
    .flex-lg-nowrap {
        flex-wrap: nowrap;
    }

    .fw-lg-wrap,
    .flex-lg-wrap {
        flex-wrap: wrap;
    }

    .fw-lg-wrap-reverse,
    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
}


/* -----------------
    04 - LG
        Flex-direction
----------------- */

@media (min-width: 992px) {
    .fd-lg-row,
    .flex-lg-row {
        flex-direction: row;
    }

    .fd-lg-row-reverse,
    .flex-lg-row-reverse {
        flex-direction: row-reverse;
    }

    .fd-lg-column,
    .flex-lg-column {
        flex-direction: column;
    }

    .fd-lg-column-reverse,
    .flex-lg-column-reverse {
        flex-direction: column-reverse;
    }
}


/* -----------------
    04 - LG
        Justify-content
----------------- */

@media (min-width: 992px) {
    .jc-lg-flex-start,
    .justify-content-lg-flex-start {
        justify-content: flex-start;
    }

    .jc-lg-center,
    .justify-content-lg-center {
        justify-content: center;
    }

    .jc-lg-flex-end,
    .justify-content-lg-flex-end {
        justify-content: flex-end;
    }

    .jc-lg-space-around,
    .justify-content-lg-around {
        justify-content: space-around;
    }

    .jc-lg-space-between,
    .justify-content-lg-between {
        justify-content: space-between;
    }

    .jc-lg-space-evenly,
    .justify-content-lg-evenly {
        justify-content: space-evenly;
    }
}



/* -----------------
    04 - LG
        Align-items
----------------- */

@media (min-width: 992px) {
    .ai-lg-flex-start,
    .align-items-lg-start {
        align-items: flex-start;
    }

    .ai-lg-flex-end,
    .align-items-lg-end {
        align-items: flex-end;
    }

    .ai-lg-center,
    .align-items-lg-center {
        align-items: center;
    }

    .ai-lg-baseline,
    .align-items-lg-baseline {
        align-items: baseline;
    }

    .ai-lg-stretch,
    .align-items-lg-stretch {
        align-items: stretch;
    }
}



/* -----------------
    04 - LG
        Align-content
----------------- */

@media (min-width: 992px) {
    .ac-lg-flex-start,
    .align-content-lg-start {
        align-content: flex-start;
    }

    .ac-lg-flex-end,
    .align-content-lg-end {
        align-content: flex-end;
    }

    .ac-lg-center,
    .align-content-lg-center {
        align-content: center;
    }

    .ac-lg-space-between,
    .align-content-lg-between {
        align-content: space-between;
    }

    .ac-lg-space-around,
    .align-content-lg-around {
        align-content: space-around;
    }

    .ac-lg-stretch,
    .align-content-lg-stretch {
        align-content: stretch;
    }
}


/* -----------------
    04 - LG
        Align-self
----------------- */

@media (min-width: 992px) {
    .as-lg-auto,
    .align-self-lg-auto {
        align-self: auto;
    }

    .as-lg-flex-start,
    .align-self-lg-start {
        align-self: flex-start;
    }

    .as-lg-flex-end,
    .align-self-lg-end {
        align-self: flex-end;
    }

    .as-lg-center,
    .align-self-lg-center {
        align-self: center;
    }

    .as-lg-baseline,
    .align-self-lg-baseline {
        align-self: baseline;
    }

    .as-lg-stretch,
    .align-self-lg-stretch {
        align-self: stretch;
    }
}



/* -----------------
    04 - LG
        Flex
----------------- */

@media (min-width: 992px) {
    .f-lg-1-1-auto,
    .flex-lg-fill {
        flex: 1 1 auto;
    }
}



/* ----------------
    04 - LG
        Flex
            Flex-grow
----------------- */

@media (min-width: 992px) {
    .fg-lg-0,
    .flex-grow-lg-0 {
        flex-grow: 0;
    }

    .fg-lg-1,
    .flex-grow-lg-1 {
        flex-grow: 1;
    }
}



/* ----------------
    04 - LG
        Flex
            Flex-shrink
----------------- */

@media (min-width: 992px) {
    .fs-lg-0,
    .flex-shrink-lg-0 {
        flex-shrink: 0;
    }

    .fs-lg-1,
    .flex-shrink-lg-1 {
        flex-shrink: 1;
    }
}



/* ----------------
    04 - LG
        Flex
            Flex-basis
----------------- */

@media (min-width: 992px) {
    .fb-lg-auto,
    .flex-basis-lg-auto {
        flex-basis: auto;
    }

    .fb-lg-0,
    .flex-basis-lg-0 {
        flex-basis: 0;
    }

    .fb-lg-50,
    .flex-basis-lg-50 {
        flex-basis: 50%;
    }

    .fb-lg-100,
    .flex-basis-lg-100 {
        flex-basis: 100%;
    }
}



/* ----------------
    04 - LG
        Gap
----------------- */

@media (min-width: 992px) {
    .g-lg-3px {
        gap: .3rem;
    }

    .g-lg-5px {
        gap: .5rem;
    }

    .g-lg-8px {
        gap: .8rem;
    }

    .g-lg-10px {
        gap: 1rem;
    }

    .g-lg-15px {
        gap: 1.5rem;
    }

    .g-lg-30px {
        gap: 3rem;
    }

    .g-lg-40px {
        gap: 4rem;
    }

    .g-lg-50px {
        gap: 5rem;
    }

    .g-lg-60px {
        gap: 6rem;
    }

    .g-lg-70px {
        gap: 7rem;
    }

    .g-lg-80px {
        gap: 8rem;
    }

    .g-lg-90px {
        gap: 9rem;
    }

    .g-lg-100px {
        gap: 10rem;
    }
}



/* ----------------
    04 - LG
        Gap
            Row
----------------- */

@media (min-width: 992px) {
    .rg-lg-3px {
        row-gap: .3rem;
    }

    .rg-lg-5px {
        row-gap: .5rem;
    }

    .rg-lg-8px {
        row-gap: .8rem;
    }

    .rg-lg-10px {
        row-gap: 1rem;
    }

    .rg-lg-15px {
        row-gap: 1.5rem;
    }

    .rg-lg-30px {
        row-gap: 3rem;
    }

    .rg-lg-40px {
        row-gap: 4rem;
    }

    .rg-lg-50px {
        row-gap: 5rem;
    }

    .rg-lg-60px {
        row-gap: 6rem;
    }

    .rg-lg-70px {
        row-gap: 7rem;
    }

    .rg-lg-80px {
        row-gap: 8rem;
    }

    .rg-lg-90px {
        row-gap: 9rem;
    }

    .rg-lg-100px {
        row-gap: 10rem;
    }
}



/* ----------------
    04 - LG
        Gap
            Column
----------------- */

@media (min-width: 992px) {
    .cg-lg-3px,
    .column-gap-lg-1 {
        column-gap: .3rem;
    }

    .cg-lg-5px,
    .column-gap-lg-2 {
        column-gap: .5rem;
    }

    .cg-lg-8px {
        column-gap: .8rem;
    }

    .cg-lg-10px,
    .column-gap-lg-3 {
        column-gap: 1rem;
    }

    .cg-lg-15px,
    .column-gap-lg-4 {
        column-gap: 1.5rem;
    }

    .cg-lg-30px,
    .column-gap-lg-5 {
        column-gap: 3rem;
    }

    .cg-lg-40px {
        column-gap: 4rem;
    }

    .cg-lg-50px {
        column-gap: 5rem;
    }

    .cg-lg-60px {
        column-gap: 6rem;
    }

    .cg-lg-70px {
        column-gap: 7rem;
    }

    .cg-lg-80px {
        column-gap: 8rem;
    }

    .cg-lg-90px {
        column-gap: 9rem;
    }

    .cg-lg-100px {
        column-gap: 10rem;
    }
}



/* ----------------
    04 - LG
        Order
----------------- */

@media (min-width: 992px) {
    .o-lg-n1,
    .order-lg-n1,
    .order-lg-first {
        order: -1;
    }

    .o-lg-0,
    .order-lg-0 {
        order: 0;
    }

    .o-lg-1,
    .order-lg-1 {
        order: 1;
    }
}



/* -----------------
    05 - XL
        Display
----------------- */

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



/* -----------------
    05 - XL
        Flex-wrap
----------------- */

@media (min-width: 1200px) {
    .fw-xl-nowrap,
    .flex-xl-nowrap {
        flex-wrap: nowrap;
    }

    .fw-xl-wrap,
    .flex-xl-wrap {
        flex-wrap: wrap;
    }

    .fw-xl-wrap-reverse,
    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
}


/* -----------------
    05 - XL
        Flex-direction
----------------- */

@media (min-width: 1200px) {
    .fd-xl-row,
    .flex-xl-row {
        flex-direction: row;
    }

    .fd-xl-row-reverse,
    .flex-xl-row-reverse {
        flex-direction: row-reverse;
    }

    .fd-xl-column,
    .flex-xl-column {
        flex-direction: column;
    }

    .fd-xl-column-reverse,
    .flex-xl-column-reverse {
        flex-direction: column-reverse;
    }
}


/* -----------------
    05 - XL
        Justify-content
----------------- */

@media (min-width: 1200px) {
    .jc-xl-flex-start,
    .justify-content-xl-flex-start {
        justify-content: flex-start;
    }

    .jc-xl-center,
    .justify-content-xl-center {
        justify-content: center;
    }

    .jc-xl-flex-end,
    .justify-content-xl-flex-end {
        justify-content: flex-end;
    }

    .jc-xl-space-around,
    .justify-content-xl-around {
        justify-content: space-around;
    }

    .jc-xl-space-between,
    .justify-content-xl-between {
        justify-content: space-between;
    }

    .jc-xl-space-evenly,
    .justify-content-xl-evenly {
        justify-content: space-evenly;
    }
}



/* -----------------
    05 - XL
        Align-items
----------------- */

@media (min-width: 1200px) {
    .ai-xl-flex-start,
    .align-items-xl-start {
        align-items: flex-start;
    }

    .ai-xl-flex-end,
    .align-items-xl-end {
        align-items: flex-end;
    }

    .ai-xl-center,
    .align-items-xl-center {
        align-items: center;
    }

    .ai-xl-baseline,
    .align-items-xl-baseline {
        align-items: baseline;
    }

    .ai-xl-stretch,
    .align-items-xl-stretch {
        align-items: stretch;
    }
}



/* -----------------
    05 - XL
        Align-content
----------------- */

@media (min-width: 1200px) {
    .ac-xl-flex-start,
    .align-content-xl-start {
        align-content: flex-start;
    }

    .ac-xl-flex-end,
    .align-content-xl-end {
        align-content: flex-end;
    }

    .ac-xl-center,
    .align-content-xl-center {
        align-content: center;
    }

    .ac-xl-space-between,
    .align-content-xl-between {
        align-content: space-between;
    }

    .ac-xl-space-around,
    .align-content-xl-around {
        align-content: space-around;
    }

    .ac-xl-stretch,
    .align-content-xl-stretch {
        align-content: stretch;
    }
}


/* -----------------
    05 - XL
        Align-self
----------------- */

@media (min-width: 1200px) {
    .as-xl-auto,
    .align-self-xl-auto {
        align-self: auto;
    }

    .as-xl-flex-start,
    .align-self-xl-start {
        align-self: flex-start;
    }

    .as-xl-flex-end,
    .align-self-xl-end {
        align-self: flex-end;
    }

    .as-xl-center,
    .align-self-xl-center {
        align-self: center;
    }

    .as-xl-baseline,
    .align-self-xl-baseline {
        align-self: baseline;
    }

    .as-xl-stretch,
    .align-self-xl-stretch {
        align-self: stretch;
    }
}



/* -----------------
    05 - XL
        Flex
----------------- */

@media (min-width: 1200px) {
    .f-xl-1-1-auto,
    .flex-xl-fill {
        flex: 1 1 auto;
    }
}



/* ----------------
    05 - XL
        Flex
            Flex-grow
----------------- */

@media (min-width: 1200px) {
    .fg-xl-0,
    .flex-grow-xl-0 {
        flex-grow: 0;
    }

    .fg-xl-1,
    .flex-grow-xl-1 {
        flex-grow: 1;
    }
}



/* ----------------
    05 - XL
        Flex
            Flex-shrink
----------------- */

@media (min-width: 1200px) {
    .fs-xl-0,
    .flex-shrink-xl-0 {
        flex-shrink: 0;
    }

    .fs-xl-1,
    .flex-shrink-xl-1 {
        flex-shrink: 1;
    }
}



/* ----------------
    05 - XL
        Flex
            Flex-basis
----------------- */

@media (min-width: 1200px) {
    .fb-xl-auto,
    .flex-basis-xl-auto {
        flex-basis: auto;
    }

    .fb-xl-0,
    .flex-basis-xl-0 {
        flex-basis: 0;
    }

    .fb-xl-50,
    .flex-basis-xl-50 {
        flex-basis: 50%;
    }

    .fb-xl-100,
    .flex-basis-xl-100 {
        flex-basis: 100%;
    }
}



/* ----------------
    05 - XL
        Gap
----------------- */

@media (min-width: 1200px) {
    .g-xl-3px {
        gap: .3rem;
    }

    .g-xl-5px {
        gap: .5rem;
    }

    .g-xl-8px {
        gap: .8rem;
    }

    .g-xl-10px {
        gap: 1rem;
    }

    .g-xl-15px {
        gap: 1.5rem;
    }

    .g-xl-30px {
        gap: 3rem;
    }

    .g-xl-40px {
        gap: 4rem;
    }

    .g-xl-50px {
        gap: 5rem;
    }

    .g-xl-60px {
        gap: 6rem;
    }

    .g-xl-70px {
        gap: 7rem;
    }

    .g-xl-80px {
        gap: 8rem;
    }

    .g-xl-90px {
        gap: 9rem;
    }

    .g-xl-100px {
        gap: 10rem;
    }
}



/* ----------------
    05 - XL
        Gap
            Row
----------------- */

@media (min-width: 1200px) {
    .rg-xl-3px {
        row-gap: .3rem;
    }

    .rg-xl-5px {
        row-gap: .5rem;
    }

    .rg-xl-8px {
        row-gap: .8rem;
    }

    .rg-xl-10px {
        row-gap: 1rem;
    }

    .rg-xl-15px {
        row-gap: 1.5rem;
    }

    .rg-xl-30px {
        row-gap: 3rem;
    }

    .rg-xl-40px {
        row-gap: 4rem;
    }

    .rg-xl-50px {
        row-gap: 5rem;
    }

    .rg-xl-60px {
        row-gap: 6rem;
    }

    .rg-xl-70px {
        row-gap: 7rem;
    }

    .rg-xl-80px {
        row-gap: 8rem;
    }

    .rg-xl-90px {
        row-gap: 9rem;
    }

    .rg-xl-100px {
        row-gap: 10rem;
    }
}



/* ----------------
    05 - XL
        Gap
            Column
----------------- */

@media (min-width: 1200px) {
    .cg-xl-3px,
    .column-gap-xl-1 {
        column-gap: .3rem;
    }

    .cg-xl-5px,
    .column-gap-xl-2 {
        column-gap: .5rem;
    }

    .cg-xl-8px {
        column-gap: .8rem;
    }

    .cg-xl-10px,
    .column-gap-xl-3 {
        column-gap: 1rem;
    }

    .cg-xl-15px,
    .column-gap-xl-4 {
        column-gap: 1.5rem;
    }

    .cg-xl-30px,
    .column-gap-xl-5 {
        column-gap: 3rem;
    }

    .cg-xl-40px {
        column-gap: 4rem;
    }

    .cg-xl-50px {
        column-gap: 5rem;
    }

    .cg-xl-60px {
        column-gap: 6rem;
    }

    .cg-xl-70px {
        column-gap: 7rem;
    }

    .cg-xl-80px {
        column-gap: 8rem;
    }

    .cg-xl-90px {
        column-gap: 9rem;
    }

    .cg-xl-100px {
        column-gap: 10rem;
    }
}



/* ----------------
    05 - XL
        Order
----------------- */

@media (min-width: 1200px) {
    .o-xl-n1,
    .order-xl-n1,
    .order-xl-first {
        order: -1;
    }

    .o-xl-0,
    .order-xl-0 {
        order: 0;
    }

    .o-xl-1,
    .order-xl-1 {
        order: 1;
    }
}



/* -----------------
    06 - XXL
        Display
----------------- */

@media (min-width: 1400px) {
    .d-xxl-flex {
        display: flex;
    }
}



/* -----------------
    06 - XXL
        Flex-wrap
----------------- */

@media (min-width: 1400px) {
    .fw-xxl-nowrap,
    .flex-xxl-nowrap {
        flex-wrap: nowrap;
    }

    .fw-xxl-wrap,
    .flex-xxl-wrap {
        flex-wrap: wrap;
    }

    .fw-xxl-wrap-reverse,
    .flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse;
    }
}


/* -----------------
    06 - XXL
        Flex-direction
----------------- */

@media (min-width: 1400px) {
    .fd-xxl-row,
    .flex-xxl-row {
        flex-direction: row;
    }

    .fd-xxl-row-reverse,
    .flex-xxl-row-reverse {
        flex-direction: row-reverse;
    }

    .fd-xxl-column,
    .flex-xxl-column {
        flex-direction: column;
    }

    .fd-xxl-column-reverse,
    .flex-xxl-column-reverse {
        flex-direction: column-reverse;
    }
}


/* -----------------
    06 - XXL
        Justify-content
----------------- */

@media (min-width: 1400px) {
    .jc-xxl-flex-start,
    .justify-content-xxl-flex-start {
        justify-content: flex-start;
    }

    .jc-xxl-center,
    .justify-content-xxl-center {
        justify-content: center;
    }

    .jc-xxl-flex-end,
    .justify-content-xxl-flex-end {
        justify-content: flex-end;
    }

    .jc-xxl-space-around,
    .justify-content-xxl-around {
        justify-content: space-around;
    }

    .jc-xxl-space-between,
    .justify-content-xxl-between {
        justify-content: space-between;
    }

    .jc-xxl-space-evenly,
    .justify-content-xxl-evenly {
        justify-content: space-evenly;
    }
}



/* -----------------
    06 - XXL
        Align-items
----------------- */

@media (min-width: 1400px) {
    .ai-xxl-flex-start,
    .align-items-xxl-start {
        align-items: flex-start;
    }

    .ai-xxl-flex-end,
    .align-items-xxl-end {
        align-items: flex-end;
    }

    .ai-xxl-center,
    .align-items-xxl-center {
        align-items: center;
    }

    .ai-xxl-baseline,
    .align-items-xxl-baseline {
        align-items: baseline;
    }

    .ai-xxl-stretch,
    .align-items-xxl-stretch {
        align-items: stretch;
    }
}



/* -----------------
    06 - XXL
        Align-content
----------------- */

@media (min-width: 1400px) {
    .ac-xxl-flex-start,
    .align-content-xxl-start {
        align-content: flex-start;
    }

    .ac-xxl-flex-end,
    .align-content-xxl-end {
        align-content: flex-end;
    }

    .ac-xxl-center,
    .align-content-xxl-center {
        align-content: center;
    }

    .ac-xxl-space-between,
    .align-content-xxl-between {
        align-content: space-between;
    }

    .ac-xxl-space-around,
    .align-content-xxl-around {
        align-content: space-around;
    }

    .ac-xxl-stretch,
    .align-content-xxl-stretch {
        align-content: stretch;
    }
}


/* -----------------
    06 - XXL
        Align-self
----------------- */

@media (min-width: 1400px) {
    .as-xxl-auto,
    .align-self-xxl-auto {
        align-self: auto;
    }

    .as-xxl-flex-start,
    .align-self-xxl-start {
        align-self: flex-start;
    }

    .as-xxl-flex-end,
    .align-self-xxl-end {
        align-self: flex-end;
    }

    .as-xxl-center,
    .align-self-xxl-center {
        align-self: center;
    }

    .as-xxl-baseline,
    .align-self-xxl-baseline {
        align-self: baseline;
    }

    .as-xxl-stretch,
    .align-self-xxl-stretch {
        align-self: stretch;
    }
}



/* -----------------
    06 - XXL
        Flex
----------------- */

@media (min-width: 1400px) {
    .f-xxl-1-1-auto,
    .flex-xxl-fill {
        flex: 1 1 auto;
    }
}



/* ----------------
    06 - XXL
        Flex
            Flex-grow
----------------- */

@media (min-width: 1400px) {
    .fg-xxl-0,
    .flex-grow-xxl-0 {
        flex-grow: 0;
    }

    .fg-xxl-1,
    .flex-grow-xxl-1 {
        flex-grow: 1;
    }
}



/* ----------------
    06 - XXL
        Flex
            Flex-shrink
----------------- */

@media (min-width: 1400px) {
    .fs-xxl-0,
    .flex-shrink-xxl-0 {
        flex-shrink: 0;
    }

    .fs-xxl-1,
    .flex-shrink-xxl-1 {
        flex-shrink: 1;
    }
}



/* ----------------
    06 - XXL
        Flex
            Flex-basis
----------------- */

@media (min-width: 1400px) {
    .fb-xxl-auto,
    .flex-basis-xxl-auto {
        flex-basis: auto;
    }

    .fb-xxl-0,
    .flex-basis-xxl-0 {
        flex-basis: 0;
    }

    .fb-xxl-50,
    .flex-basis-xxl-50 {
        flex-basis: 50%;
    }

    .fb-xxl-100,
    .flex-basis-xxl-100 {
        flex-basis: 100%;
    }
}



/* ----------------
    06 - XXL
        Gap
----------------- */

@media (min-width: 1400px) {
    .g-xxl-3px {
        gap: .3rem;
    }

    .g-xxl-5px {
        gap: .5rem;
    }

    .g-xxl-8px {
        gap: .8rem;
    }

    .g-xxl-10px {
        gap: 1rem;
    }

    .g-xxl-15px {
        gap: 1.5rem;
    }

    .g-xxl-30px {
        gap: 3rem;
    }

    .g-xxl-40px {
        gap: 4rem;
    }

    .g-xxl-50px {
        gap: 5rem;
    }

    .g-xxl-60px {
        gap: 6rem;
    }

    .g-xxl-70px {
        gap: 7rem;
    }

    .g-xxl-80px {
        gap: 8rem;
    }

    .g-xxl-90px {
        gap: 9rem;
    }

    .g-xxl-100px {
        gap: 10rem;
    }
}



/* ----------------
    06 - XXL
        Gap
            Row
----------------- */

@media (min-width: 1400px) {
    .rg-xxl-3px {
        row-gap: .3rem;
    }

    .rg-xxl-5px {
        row-gap: .5rem;
    }

    .rg-xxl-8px {
        row-gap: .8rem;
    }

    .rg-xxl-10px {
        row-gap: 1rem;
    }

    .rg-xxl-15px {
        row-gap: 1.5rem;
    }

    .rg-xxl-30px {
        row-gap: 3rem;
    }

    .rg-xxl-40px {
        row-gap: 4rem;
    }

    .rg-xxl-50px {
        row-gap: 5rem;
    }

    .rg-xxl-60px {
        row-gap: 6rem;
    }

    .rg-xxl-70px {
        row-gap: 7rem;
    }

    .rg-xxl-80px {
        row-gap: 8rem;
    }

    .rg-xxl-90px {
        row-gap: 9rem;
    }

    .rg-xxl-100px {
        row-gap: 10rem;
    }
}



/* ----------------
    06 - XXL
        Gap
            Column
----------------- */

@media (min-width: 1400px) {
    .cg-xxl-3px,
    .column-gap-xxl-1 {
        column-gap: .3rem;
    }

    .cg-xxl-5px,
    .column-gap-xxl-2 {
        column-gap: .5rem;
    }

    .cg-xxl-8px {
        column-gap: .8rem;
    }

    .cg-xxl-10px,
    .column-gap-xxl-3 {
        column-gap: 1rem;
    }

    .cg-xxl-15px,
    .column-gap-xxl-4 {
        column-gap: 1.5rem;
    }

    .cg-xxl-30px,
    .column-gap-xxl-5 {
        column-gap: 3rem;
    }

    .cg-xxl-40px {
        column-gap: 4rem;
    }

    .cg-xxl-50px {
        column-gap: 5rem;
    }

    .cg-xxl-60px {
        column-gap: 6rem;
    }

    .cg-xxl-70px {
        column-gap: 7rem;
    }

    .cg-xxl-80px {
        column-gap: 8rem;
    }

    .cg-xxl-90px {
        column-gap: 9rem;
    }

    .cg-xxl-100px {
        column-gap: 10rem;
    }
}



/* ----------------
    06 - XXL
        Order
----------------- */

@media (min-width: 1400px) {
    .o-xxl-n1,
    .order-xxl-n1,
    .order-xxl-first {
        order: -1;
    }

    .o-xxl-0,
    .order-xxl-0 {
        order: 0;
    }

    .o-xxl-1,
    .order-xxl-1 {
        order: 1;
    }
}