/* Base Extra Gutter Spacing */
.g-6 {
    --bs-gutter-x: 4rem;
    --bs-gutter-y: 4rem;
}

.g-7 {
    --bs-gutter-x: 5rem;
    --bs-gutter-y: 5rem;
}

.g-8 {
    --bs-gutter-x: 6rem;
    --bs-gutter-y: 6rem;
}

/* Base Horizontal-only Gutters */
.gx-6 {
    --bs-gutter-x: 4rem;
}

.gx-7 {
    --bs-gutter-x: 5rem;
}

.gx-8 {
    --bs-gutter-x: 6rem;
}

/* Base Vertical-only Gutters */
.gy-6 {
    --bs-gutter-y: 4rem;
}

.gy-7 {
    --bs-gutter-y: 5rem;
}

.gy-8 {
    --bs-gutter-y: 6rem;
}

/* Small (sm) breakpoint */
@media (min-width: 576px) {
    .g-sm-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }
    
    .g-sm-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }
    
    .g-sm-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }
    
    .gx-sm-6 {
        --bs-gutter-x: 4rem;
    }
    
    .gx-sm-7 {
        --bs-gutter-x: 5rem;
    }
    
    .gx-sm-8 {
        --bs-gutter-x: 6rem;
    }
    
    .gy-sm-6 {
        --bs-gutter-y: 4rem;
    }
    
    .gy-sm-7 {
        --bs-gutter-y: 5rem;
    }
    
    .gy-sm-8 {
        --bs-gutter-y: 6rem;
    }
}

/* Medium (md) breakpoint */
@media (min-width: 768px) {
    .g-md-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }
    
    .g-md-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }
    
    .g-md-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }
    
    .gx-md-6 {
        --bs-gutter-x: 4rem;
    }
    
    .gx-md-7 {
        --bs-gutter-x: 5rem;
    }
    
    .gx-md-8 {
        --bs-gutter-x: 6rem;
    }
    
    .gy-md-6 {
        --bs-gutter-y: 4rem;
    }
    
    .gy-md-7 {
        --bs-gutter-y: 5rem;
    }
    
    .gy-md-8 {
        --bs-gutter-y: 6rem;
    }
}

/* Large (lg) breakpoint */
@media (min-width: 992px) {
    .g-lg-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }
    
    .g-lg-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }
    
    .g-lg-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }
    
    .gx-lg-6 {
        --bs-gutter-x: 4rem;
    }
    
    .gx-lg-7 {
        --bs-gutter-x: 5rem;
    }
    
    .gx-lg-8 {
        --bs-gutter-x: 6rem;
    }
    
    .gy-lg-6 {
        --bs-gutter-y: 4rem;
    }
    
    .gy-lg-7 {
        --bs-gutter-y: 5rem;
    }
    
    .gy-lg-8 {
        --bs-gutter-y: 6rem;
    }
}

/* Extra Large (xl) breakpoint */
@media (min-width: 1200px) {
    .g-xl-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }
    
    .g-xl-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }
    
    .g-xl-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }
    
    .gx-xl-6 {
        --bs-gutter-x: 4rem;
    }
    
    .gx-xl-7 {
        --bs-gutter-x: 5rem;
    }
    
    .gx-xl-8 {
        --bs-gutter-x: 6rem;
    }
    
    .gy-xl-6 {
        --bs-gutter-y: 4rem;
    }
    
    .gy-xl-7 {
        --bs-gutter-y: 5rem;
    }
    
    .gy-xl-8 {
        --bs-gutter-y: 6rem;
    }
}

/* Extra Extra Large (xxl) breakpoint */
@media (min-width: 1400px) {
    .g-xxl-6 {
        --bs-gutter-x: 4rem;
        --bs-gutter-y: 4rem;
    }
    
    .g-xxl-7 {
        --bs-gutter-x: 5rem;
        --bs-gutter-y: 5rem;
    }
    
    .g-xxl-8 {
        --bs-gutter-x: 6rem;
        --bs-gutter-y: 6rem;
    }
    
    .gx-xxl-6 {
        --bs-gutter-x: 4rem;
    }
    
    .gx-xxl-7 {
        --bs-gutter-x: 5rem;
    }
    
    .gx-xxl-8 {
        --bs-gutter-x: 6rem;
    }
    
    .gy-xxl-6 {
        --bs-gutter-y: 4rem;
    }
    
    .gy-xxl-7 {
        --bs-gutter-y: 5rem;
    }
    
    .gy-xxl-8 {
        --bs-gutter-y: 6rem;
    }
}

/* Custom Containers */

.container-small {
    padding-left: 15px;
    padding-right: 15px;
}

    .container-small:before, .container-small:after {
        content: " ";
        display: table;
        clear: both;
    }

@media(min-width: 1200px) {
    .container-small {
        width: 860px;
        margin-left: auto;
        margin-right: auto;
    }
}

.container-large {
    padding-left: 15px;
    padding-right: 15px;
}

    .container-large:before, .container-large:after {
        content: " ";
        display: table;
        clear: both;
    }

@media(min-width: 1600px) {
    .container-large {
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media(min-width: 1800px) {
    .container-large {
        max-width: 1700px;
    }
}