.grid {
    &-0 {
        & > * {
            width: auto !important;
        }
    }

    &-2 {
        & > * {
            @include custom-grid(xs, 2, 5px);
        }
    }
    &-3 {
        & > * {
            @include custom-grid(xs, 3, 5px);
        }
    }
    &-4 {
        & > * {
            @include custom-grid(xs, 4, 5px);
        }
    }
}

.grid-sm {
    &-2,
    &-3,
    &-4 {
        display: flex;
        flex-wrap: wrap;
        margin: 0;

        @include media-breakpoint-up(sm) {
            margin: 0 -5px;
        }

        & > * {
            width: 100%;
        }
    }

    &-0 {
        & > * {
            @include media-breakpoint-up(sm) {
                width: auto !important;
            }
        }
    }

    &-2 {
        & > * {
            @include custom-grid(sm, 2, 5px);
        }
    }

    &-3 {
        & > * {
            @include custom-grid(sm, 3, 5px);
        }
    }

    &-4 {
        & > * {
            @include custom-grid(sm, 4, 5px);
        }
    }
}

.grid-md {
    &-2,
    &-3,
    &-4 {
        display: flex;
        flex-wrap: wrap;
        margin: 0;

        @include media-breakpoint-up(md) {
            margin: 0 -5px;
        }

        & > * {
            width: 100%;
        }
    }

    &-2 {
        & > * {
            @include custom-grid(md, 2, 5px);
        }
    }

    &-3 {
        & > * {
            @include custom-grid(md, 3, 5px);
        }
    }

    &-4 {
        & > * {
            @include custom-grid(md, 4, 5px);
        }
    }
}

.grid-lg {
    &-2,
    &-3,
    &-4 {
        display: flex;
        flex-wrap: wrap;
        margin: 0;

        @include media-breakpoint-up(lg) {
            margin: 0 -5px;
        }

        & > * {
            width: 100%;
        }
    }

    &-2 {
        & > * {
            @include custom-grid(lg, 2, 5px);
        }
    }

    &-3 {
        & > * {
            @include custom-grid(lg, 3, 5px);
        }
    }

    &-4 {
        & > * {
            @include custom-grid(lg, 4, 5px);
        }
    }
}

.grid {
    &-2,
    &-3,
    &-4 {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -5px;
    }
}
