// ------------------------------------------------------
// Col & row
// ------------------------------------------------------
.row {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(0px - var(--sus-fmr-gtt, var(--sus-fmx-gtt, var(--sus-fx-gtt, var(--sus-f-gtt)))));
    margin-left: calc(0px - var(--sus-fml-gtt, var(--sus-fmx-gtt, var(--sus-fx-gtt, var(--sus-f-gtt)))));
    --sus-f-gtt: #{$commonSp};

    &--f {
        margin-top: calc(0px - var(--sus-fmt-gtt, var(--sus-fmy-gtt, var(--sus-fy-gtt, var(--sus-f-gtt)))));
        margin-bottom: calc(0px - var(--sus-fmb-gtt, var(--sus-fmy-gtt, var(--sus-fy-gtt, var(--sus-f-gtt)))));
    }
}

.col {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-right: var(--sus-fpr-gtt, var(--sus-fpx-gtt, var(--sus-fmr-gtt, var(--sus-fx-gtt, var(--sus-f-gtt)))));
    padding-left: var(--sus-fpl-gtt, var(--sus-fpx-gtt, var(--sus-fml-gtt, var(--sus-fx-gtt, var(--sus-f-gtt)))));
    --sus-f-gtt: #{$commonSp};

    &--f {
        padding-top: var(--sus-fpt-gtt, var(--sus-fpy-gtt, var(--sus-fmt-gtt, var(--sus-fy-gtt, var(--sus-f-gtt)))));
        padding-bottom: var(--sus-fpb-gtt, var(--sus-fpy-gtt, var(--sus-fmb-gtt, var(--sus-fy-gtt, var(--sus-f-gtt)))));
    }
}

.col {
    &-20 {
        flex: 0 0 20%;
        width: 20%;
        max-width: 20%;
    }

    &-33 {
        flex: 0 0 33.333333%;
        width: 33.333333%;
        max-width: 33.333333%;
    }

    &-40 {
        flex: 0 0 40%;
        width: 40%;
        max-width: 40%;
    }

    &-50 {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
    }

    &-60 {
        flex: 0 0 60%;
        width: 60%;
        max-width: 60%;
    }
}

@include sm-wmin {
    .xs\:col {
        &-20 {
            flex: 0 0 20%;
            width: 20%;
            max-width: 20%;
        }

        &-33 {
            flex: 0 0 33.333333%;
            width: 33.333333%;
            max-width: 33.333333%;
        }

        &-40 {
            flex: 0 0 40%;
            width: 40%;
            max-width: 40%;
        }

        &-50 {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%;
        }

        &-60 {
            flex: 0 0 60%;
            width: 60%;
            max-width: 60%;
        }
    }
}

@include sm-wmin {
    .sm\:col {
        &-20 {
            flex: 0 0 20%;
            width: 20%;
            max-width: 20%;
        }

        &-33 {
            flex: 0 0 33.333333%;
            width: 33.333333%;
            max-width: 33.333333%;
        }

        &-40 {
            flex: 0 0 40%;
            width: 40%;
            max-width: 40%;
        }

        &-50 {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%;
        }

        &-60 {
            flex: 0 0 60%;
            width: 60%;
            max-width: 60%;
        }
    }
}

@include md-wmin {
    .md\:col {
        &-20 {
            flex: 0 0 20%;
            width: 20%;
            max-width: 20%;
        }

        &-33 {
            flex: 0 0 33.333333%;
            width: 33.333333%;
            max-width: 33.333333%;
        }

        &-40 {
            flex: 0 0 40%;
            width: 40%;
            max-width: 40%;
        }

        &-50 {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%;
        }

        &-60 {
            flex: 0 0 60%;
            width: 60%;
            max-width: 60%;
        }
    }
}

@include lg-wmin {
    .lg\:col {
        &-20 {
            flex: 0 0 20%;
            width: 20%;
            max-width: 20%;
        }

        &-33 {
            flex: 0 0 33.333333%;
            width: 33.333333%;
            max-width: 33.333333%;
        }

        &-40 {
            flex: 0 0 40%;
            width: 40%;
            max-width: 40%;
        }

        &-50 {
            flex: 0 0 50%;
            width: 50%;
            max-width: 50%;
        }

        &-60 {
            flex: 0 0 60%;
            width: 60%;
            max-width: 60%;
        }
    }
}


// ------------------------------------------------------
// Col & row end
// ------------------------------------------------------


// ------------------------------------------------------
// Padding
// ------------------------------------------------------
.pt {
    --sus-p-gtt: #{$commonSp};
    padding-top: var(--sus-p-gtt);
}

.pb {
    --sus-p-gtt: #{$commonSp};
    padding-bottom: var(--sus-p-gtt);
}

.px {
    --sus-p-gtt: #{$commonSp};
    padding-right: var(--sus-p-gtt);
    padding-left: var(--sus-p-gtt);
}

.py {
    --sus-p-gtt: #{$commonSp};
    padding-bottom: var(--sus-p-gtt);
    padding-top: var(--sus-p-gtt);
}

.px-0 {
    padding-right: 0;
    padding-left: 0;
}

// ------------------------------------------------------
// Padding end
// ------------------------------------------------------


// ------------------------------------------------------
// Margin
// ------------------------------------------------------
.mt {
    --sus-m-gtt: #{$commonSp};
    margin-top: var(--sus-m-gtt);
}

.mb {
    --sus-m-gtt: #{$commonSp};
    margin-bottom: var(--sus-m-gtt);
}

.mx {
    --sus-m-gtt: #{$commonSp};
    margin-right: var(--sus-m-gtt);
    margin-left: var(--sus-m-gtt);
}

.-mx {
    --sus-m-gtt: #{$commonSp};
    margin-right: calc(0px - var(--sus-m-gtt));
    margin-left: calc(0px - var(--sus-m-gtt));
}

.mx {
    --sus-m-gtt: #{$commonSp};
    margin-right: var(--sus-m-gtt);
    margin-left: var(--sus-m-gtt);
}

.my {
    --sus-m-gtt: #{$commonSp};
    margin-bottom: var(--sus-m-gtt);
    margin-top: var(--sus-m-gtt);
}

.mx-0 {
    margin-right: 0;
    margin-left: 0;
}

// ------------------------------------------------------
// Margin end
// ------------------------------------------------------


// ------------------------------------------------------
// Flex
// ------------------------------------------------------
.flex-w-auto {
    width: auto;
    flex: 0 0 auto;
}

.flex-xc-aspo {
    width: auto;
    flex: 1 1 0;
    max-width: 100%;
}

.flex-jc-between {
    display: flex;
    justify-content: space-between;
}

.flex-jc-center {
    display: flex;
    justify-content: center;
}

.flex-ai-center {
    display: flex;
    align-items: center;
}

.flex-ai-jc-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

// ------------------------------------------------------
// Flex end
// ------------------------------------------------------


// ------------------------------------------------------
// Size
// ------------------------------------------------------
.size-full {
    width: 100%;
    height: 100%;
}

.w-full {
    width: 100%;    
    
}

.h-full {
    height: 100%;
}

.w-fit {
    width: fit-content;
}

// ------------------------------------------------------
// Size end
// ------------------------------------------------------


// ------------------------------------------------------
// Visual
// ------------------------------------------------------
.overflow-hidden {
    overflow: hidden;
}

.object-cover {
    object-fit: cover;
}

.list-none {
    list-style: none;
}

.pointer-events-none {
    pointer-events: none;
}

// ------------------------------------------------------
// Visual end
// ------------------------------------------------------