/*
 * Minimal 12-column grid.
 * Breakpoints: sm 576, md 768, lg 992, xl 1200, xxl 1400.
 */
.container,
.container-fluid {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--savas-page-gutter);
}

.container {
    max-width: calc(var(--savas-container-max) + (var(--savas-page-gutter) * 2));
}

.row {
    --savas-row-gutter-x: var(--savas-grid-gutter-x);
    --savas-row-gutter-y: var(--savas-grid-gutter-y);
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--savas-row-gutter-y));
    margin-inline: calc(-0.5 * var(--savas-row-gutter-x));
}

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin-top: var(--savas-row-gutter-y);
    padding-inline: calc(0.5 * var(--savas-row-gutter-x));
}

.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 { width: 8.333333%; }
.col-2 { width: 16.666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.333333%; }
.col-5 { width: 41.666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.333333%; }
.col-8 { width: 66.666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

@media screen and (min-width: 36rem) {
    .col-sm { flex: 1 0 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-1 { width: 8.333333%; }
    .col-sm-2 { width: 16.666667%; }
    .col-sm-3 { width: 25%; }
    .col-sm-4 { width: 33.333333%; }
    .col-sm-5 { width: 41.666667%; }
    .col-sm-6 { width: 50%; }
    .col-sm-7 { width: 58.333333%; }
    .col-sm-8 { width: 66.666667%; }
    .col-sm-9 { width: 75%; }
    .col-sm-10 { width: 83.333333%; }
    .col-sm-11 { width: 91.666667%; }
    .col-sm-12 { width: 100%; }
}

@media screen and (min-width: 48rem) {
    :root {
        --savas-page-gutter: 1.5rem;
    }

    .col-md { flex: 1 0 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-1 { width: 8.333333%; }
    .col-md-2 { width: 16.666667%; }
    .col-md-3 { width: 25%; }
    .col-md-4 { width: 33.333333%; }
    .col-md-5 { width: 41.666667%; }
    .col-md-6 { width: 50%; }
    .col-md-7 { width: 58.333333%; }
    .col-md-8 { width: 66.666667%; }
    .col-md-9 { width: 75%; }
    .col-md-10 { width: 83.333333%; }
    .col-md-11 { width: 91.666667%; }
    .col-md-12 { width: 100%; }
}

@media screen and (min-width: 62rem) {
    .col-lg { flex: 1 0 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-1 { width: 8.333333%; }
    .col-lg-2 { width: 16.666667%; }
    .col-lg-3 { width: 25%; }
    .col-lg-4 { width: 33.333333%; }
    .col-lg-5 { width: 41.666667%; }
    .col-lg-6 { width: 50%; }
    .col-lg-7 { width: 58.333333%; }
    .col-lg-8 { width: 66.666667%; }
    .col-lg-9 { width: 75%; }
    .col-lg-10 { width: 83.333333%; }
    .col-lg-11 { width: 91.666667%; }
    .col-lg-12 { width: 100%; }
}

@media screen and (min-width: 75rem) {
    :root {
        --savas-page-gutter: 2rem;
    }

    .col-xl { flex: 1 0 0%; }
    .col-xl-auto { flex: 0 0 auto; width: auto; }
    .col-xl-1 { width: 8.333333%; }
    .col-xl-2 { width: 16.666667%; }
    .col-xl-3 { width: 25%; }
    .col-xl-4 { width: 33.333333%; }
    .col-xl-5 { width: 41.666667%; }
    .col-xl-6 { width: 50%; }
    .col-xl-7 { width: 58.333333%; }
    .col-xl-8 { width: 66.666667%; }
    .col-xl-9 { width: 75%; }
    .col-xl-10 { width: 83.333333%; }
    .col-xl-11 { width: 91.666667%; }
    .col-xl-12 { width: 100%; }
}

@media screen and (min-width: 87.5rem) {
    :root {
        --savas-page-gutter: 3rem;
    }

    .col-xxl { flex: 1 0 0%; }
    .col-xxl-auto { flex: 0 0 auto; width: auto; }
    .col-xxl-1 { width: 8.333333%; }
    .col-xxl-2 { width: 16.666667%; }
    .col-xxl-3 { width: 25%; }
    .col-xxl-4 { width: 33.333333%; }
    .col-xxl-5 { width: 41.666667%; }
    .col-xxl-6 { width: 50%; }
    .col-xxl-7 { width: 58.333333%; }
    .col-xxl-8 { width: 66.666667%; }
    .col-xxl-9 { width: 75%; }
    .col-xxl-10 { width: 83.333333%; }
    .col-xxl-11 { width: 91.666667%; }
    .col-xxl-12 { width: 100%; }
}