/* 1. THE NATIVE-SYNCED CONTAINER */
.container-mega {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    /* Matching Bootstrap's exact padding math */
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

/* Standard Responsive Steps */
@media (min-width: 576px)  { .container-mega { max-width: 540px;  } }
@media (min-width: 768px)  { .container-mega { max-width: 720px;  } }
@media (min-width: 992px)  { .container-mega { max-width: 960px;  } }
@media (min-width: 1200px) { .container-mega { max-width: 1140px; } }
@media (min-width: 1400px) { .container-mega { max-width: 1320px; } }

/* The New "Mega" Breakpoint */
@media (min-width: 1920px) { 
    .container-mega { max-width: 1870px; } 

    /* 2. THE MEGA GRID (Using standard Bootstrap percentage widths) */
    .col-mega-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-mega-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-mega-3  { flex: 0 0 auto; width: 25%; }
    .col-mega-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-mega-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-mega-6  { flex: 0 0 auto; width: 50%; }
    .col-mega-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-mega-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-mega-9  { flex: 0 0 auto; width: 75%; }
    .col-mega-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-mega-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-mega-12 { flex: 0 0 auto; width: 100%; }
}