/* ==========================================================
   Bootstrap 4 Gap Utilities (Bootstrap 5 Compatible)
   Supports: g-*, gx-*, gy-* + sm/md/lg/xl breakpoints
   ========================================================== */

/* Base gap values */
.g-0 {
    gap: 0 !important;
}

.g-1 {
    gap: 0.25rem !important;
}

.g-2 {
    gap: 0.5rem !important;
}

.g-3 {
    gap: 1rem !important;
}

.g-4 {
    gap: 1.5rem !important;
}

.g-5 {
    gap: 3rem !important;
}

/* Row gap */
.gy-0 {
    row-gap: 0 !important;
}

.gy-1 {
    row-gap: 0.25rem !important;
}

.gy-2 {
    row-gap: 0.5rem !important;
}

.gy-3 {
    row-gap: 1rem !important;
}

.gy-4 {
    row-gap: 1.5rem !important;
}

.gy-5 {
    row-gap: 3rem !important;
}

/* Column gap */
.gx-0 {
    column-gap: 0 !important;
}

.gx-1 {
    column-gap: 0.25rem !important;
}

.gx-2 {
    column-gap: 0.5rem !important;
}

.gx-3 {
    column-gap: 1rem !important;
}

.gx-4 {
    column-gap: 1.5rem !important;
}

.gx-5 {
    column-gap: 3rem !important;
}

/* ==========================================================
   Responsive Gap Utilities
   Breakpoints: sm (576) · md (768) · lg (992) · xl (1200)
   ========================================================== */

/* Generator helper macro (conceptual, manually expanded below) */

/* -------- SM -------- */
@media (min-width: 576px) {
    .g-sm-0 {
        gap: 0 !important;
    }

    .g-sm-1 {
        gap: 0.25rem !important;
    }

    .g-sm-2 {
        gap: 0.5rem !important;
    }

    .g-sm-3 {
        gap: 1rem !important;
    }

    .g-sm-4 {
        gap: 1.5rem !important;
    }

    .g-sm-5 {
        gap: 3rem !important;
    }

    .gy-sm-0 {
        row-gap: 0 !important;
    }

    .gy-sm-1 {
        row-gap: 0.25rem !important;
    }

    .gy-sm-2 {
        row-gap: 0.5rem !important;
    }

    .gy-sm-3 {
        row-gap: 1rem !important;
    }

    .gy-sm-4 {
        row-gap: 1.5rem !important;
    }

    .gy-sm-5 {
        row-gap: 3rem !important;
    }

    .gx-sm-0 {
        column-gap: 0 !important;
    }

    .gx-sm-1 {
        column-gap: 0.25rem !important;
    }

    .gx-sm-2 {
        column-gap: 0.5rem !important;
    }

    .gx-sm-3 {
        column-gap: 1rem !important;
    }

    .gx-sm-4 {
        column-gap: 1.5rem !important;
    }

    .gx-sm-5 {
        column-gap: 3rem !important;
    }
}

/* -------- MD -------- */
@media (min-width: 768px) {
    .g-md-0 {
        gap: 0 !important;
    }

    .g-md-1 {
        gap: 0.25rem !important;
    }

    .g-md-2 {
        gap: 0.5rem !important;
    }

    .g-md-3 {
        gap: 1rem !important;
    }

    .g-md-4 {
        gap: 1.5rem !important;
    }

    .g-md-5 {
        gap: 3rem !important;
    }

    .gy-md-0 {
        row-gap: 0 !important;
    }

    .gy-md-1 {
        row-gap: 0.25rem !important;
    }

    .gy-md-2 {
        row-gap: 0.5rem !important;
    }

    .gy-md-3 {
        row-gap: 1rem !important;
    }

    .gy-md-4 {
        row-gap: 1.5rem !important;
    }

    .gy-md-5 {
        row-gap: 3rem !important;
    }

    .gx-md-0 {
        column-gap: 0 !important;
    }

    .gx-md-1 {
        column-gap: 0.25rem !important;
    }

    .gx-md-2 {
        column-gap: 0.5rem !important;
    }

    .gx-md-3 {
        column-gap: 1rem !important;
    }

    .gx-md-4 {
        column-gap: 1.5rem !important;
    }

    .gx-md-5 {
        column-gap: 3rem !important;
    }
}

/* -------- LG -------- */
@media (min-width: 992px) {
    .g-lg-0 {
        gap: 0 !important;
    }

    .g-lg-1 {
        gap: 0.25rem !important;
    }

    .g-lg-2 {
        gap: 0.5rem !important;
    }

    .g-lg-3 {
        gap: 1rem !important;
    }

    .g-lg-4 {
        gap: 1.5rem !important;
    }

    .g-lg-5 {
        gap: 3rem !important;
    }

    .gy-lg-0 {
        row-gap: 0 !important;
    }

    .gy-lg-1 {
        row-gap: 0.25rem !important;
    }

    .gy-lg-2 {
        row-gap: 0.5rem !important;
    }

    .gy-lg-3 {
        row-gap: 1rem !important;
    }

    .gy-lg-4 {
        row-gap: 1.5rem !important;
    }

    .gy-lg-5 {
        row-gap: 3rem !important;
    }

    .gx-lg-0 {
        column-gap: 0 !important;
    }

    .gx-lg-1 {
        column-gap: 0.25rem !important;
    }

    .gx-lg-2 {
        column-gap: 0.5rem !important;
    }

    .gx-lg-3 {
        column-gap: 1rem !important;
    }

    .gx-lg-4 {
        column-gap: 1.5rem !important;
    }

    .gx-lg-5 {
        column-gap: 3rem !important;
    }
}

/* -------- XL -------- */
@media (min-width: 1200px) {
    .g-xl-0 {
        gap: 0 !important;
    }

    .g-xl-1 {
        gap: 0.25rem !important;
    }

    .g-xl-2 {
        gap: 0.5rem !important;
    }

    .g-xl-3 {
        gap: 1rem !important;
    }

    .g-xl-4 {
        gap: 1.5rem !important;
    }

    .g-xl-5 {
        gap: 3rem !important;
    }

    .gy-xl-0 {
        row-gap: 0 !important;
    }

    .gy-xl-1 {
        row-gap: 0.25rem !important;
    }

    .gy-xl-2 {
        row-gap: 0.5rem !important;
    }

    .gy-xl-3 {
        row-gap: 1rem !important;
    }

    .gy-xl-4 {
        row-gap: 1.5rem !important;
    }

    .gy-xl-5 {
        row-gap: 3rem !important;
    }

    .gx-xl-0 {
        column-gap: 0 !important;
    }

    .gx-xl-1 {
        column-gap: 0.25rem !important;
    }

    .gx-xl-2 {
        column-gap: 0.5rem !important;
    }

    .gx-xl-3 {
        column-gap: 1rem !important;
    }

    .gx-xl-4 {
        column-gap: 1.5rem !important;
    }

    .gx-xl-5 {
        column-gap: 3rem !important;
    }
}