/*
 * Draggo grid — Bootstrap 5 compatible, self-contained, no JS.
 * Loaded when draggo.bootstrap.mode = "grid" (default). Class names match
 * Bootstrap so switching to mode "full" needs no template changes.
 */

.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
}

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

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

/* Gutter utilities */
.g-0 { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.g-1 { --bs-gutter-x: .25rem; --bs-gutter-y: .25rem; }
.g-2 { --bs-gutter-x: .5rem;  --bs-gutter-y: .5rem; }
.g-3 { --bs-gutter-x: 1rem;   --bs-gutter-y: 1rem; }
.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.g-5 { --bs-gutter-x: 3rem;   --bs-gutter-y: 3rem; }

/* Base (xs) columns */
.col   { flex: 1 0 0%; }
.col-12 { width: 100%; }
.col-1  { width: 8.33333%; }  .col-2  { width: 16.66667%; }
.col-3  { width: 25%; }       .col-4  { width: 33.33333%; }
.col-5  { width: 41.66667%; } .col-6  { width: 50%; }
.col-7  { width: 58.33333%; } .col-8  { width: 66.66667%; }
.col-9  { width: 75%; }       .col-10 { width: 83.33333%; }
.col-11 { width: 91.66667%; }

/* md and up (tablet, ≥768px) */
@media (min-width: 768px) {
    .col-md-1  { width: 8.33333%; }  .col-md-2  { width: 16.66667%; }
    .col-md-3  { width: 25%; }       .col-md-4  { width: 33.33333%; }
    .col-md-5  { width: 41.66667%; } .col-md-6  { width: 50%; }
    .col-md-7  { width: 58.33333%; } .col-md-8  { width: 66.66667%; }
    .col-md-9  { width: 75%; }       .col-md-10 { width: 83.33333%; }
    .col-md-11 { width: 91.66667%; } .col-md-12 { width: 100%; }
}

/* lg and up (desktop, ≥992px) — Draggo emits col-N col-md-N col-lg-N */
@media (min-width: 992px) {
    .col-lg-1  { width: 8.33333%; }  .col-lg-2  { width: 16.66667%; }
    .col-lg-3  { width: 25%; }       .col-lg-4  { width: 33.33333%; }
    .col-lg-5  { width: 41.66667%; } .col-lg-6  { width: 50%; }
    .col-lg-7  { width: 58.33333%; } .col-lg-8  { width: 66.66667%; }
    .col-lg-9  { width: 75%; }       .col-lg-10 { width: 83.33333%; }
    .col-lg-11 { width: 91.66667%; } .col-lg-12 { width: 100%; }
}