/*
 * Concrete CMS Theme Grid – Bootstrap 5 kompatibilní dvanáctisloupcová mřížka.
 *
 * Soubor se načítá až za aktivním skinem. Vyšší specificita a !important
 * u konstrukčních vlastností chrání rozložení také v editačním režimu Concrete.
 */
.ccm-page.sporofin-theme .container {
    width: min(1168px, calc(100% - 48px));
    margin-right: auto;
    margin-left: auto;
}

.ccm-page.sporofin-theme .site-container .container {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
}

.ccm-page.sporofin-theme .row {
    --sporofin-grid-gutter-x: 1.5rem;
    --sporofin-grid-gutter-y: 0;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: calc(-1 * var(--sporofin-grid-gutter-y));
    margin-right: calc(-0.5 * var(--sporofin-grid-gutter-x));
    margin-left: calc(-0.5 * var(--sporofin-grid-gutter-x));
}

.ccm-page.sporofin-theme .row > * {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-right: calc(0.5 * var(--sporofin-grid-gutter-x));
    padding-left: calc(0.5 * var(--sporofin-grid-gutter-x));
    margin-top: var(--sporofin-grid-gutter-y);
}

.ccm-page.sporofin-theme .row.g-4 {
    --sporofin-grid-gutter-x: 1.5rem;
    --sporofin-grid-gutter-y: 1.5rem;
}

@media (min-width: 768px) {
    .ccm-page.sporofin-theme .row > .col-md-1 { width: 8.33333333% !important; max-width: 8.33333333% !important; flex-basis: 8.33333333% !important; }
    .ccm-page.sporofin-theme .row > .col-md-2 { width: 16.66666667% !important; max-width: 16.66666667% !important; flex-basis: 16.66666667% !important; }
    .ccm-page.sporofin-theme .row > .col-md-3 { width: 25% !important; max-width: 25% !important; flex-basis: 25% !important; }
    .ccm-page.sporofin-theme .row > .col-md-4 { width: 33.33333333% !important; max-width: 33.33333333% !important; flex-basis: 33.33333333% !important; }
    .ccm-page.sporofin-theme .row > .col-md-5 { width: 41.66666667% !important; max-width: 41.66666667% !important; flex-basis: 41.66666667% !important; }
    .ccm-page.sporofin-theme .row > .col-md-6 { width: 50% !important; max-width: 50% !important; flex-basis: 50% !important; }
    .ccm-page.sporofin-theme .row > .col-md-7 { width: 58.33333333% !important; max-width: 58.33333333% !important; flex-basis: 58.33333333% !important; }
    .ccm-page.sporofin-theme .row > .col-md-8 { width: 66.66666667% !important; max-width: 66.66666667% !important; flex-basis: 66.66666667% !important; }
    .ccm-page.sporofin-theme .row > .col-md-9 { width: 75% !important; max-width: 75% !important; flex-basis: 75% !important; }
    .ccm-page.sporofin-theme .row > .col-md-10 { width: 83.33333333% !important; max-width: 83.33333333% !important; flex-basis: 83.33333333% !important; }
    .ccm-page.sporofin-theme .row > .col-md-11 { width: 91.66666667% !important; max-width: 91.66666667% !important; flex-basis: 91.66666667% !important; }
    .ccm-page.sporofin-theme .row > .col-md-12 { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }

    .ccm-page.sporofin-theme .offset-md-1 { margin-left: 8.33333333% !important; }
    .ccm-page.sporofin-theme .offset-md-2 { margin-left: 16.66666667% !important; }
    .ccm-page.sporofin-theme .offset-md-3 { margin-left: 25% !important; }
    .ccm-page.sporofin-theme .offset-md-4 { margin-left: 33.33333333% !important; }
    .ccm-page.sporofin-theme .offset-md-5 { margin-left: 41.66666667% !important; }
    .ccm-page.sporofin-theme .offset-md-6 { margin-left: 50% !important; }
    .ccm-page.sporofin-theme .offset-md-7 { margin-left: 58.33333333% !important; }
    .ccm-page.sporofin-theme .offset-md-8 { margin-left: 66.66666667% !important; }
    .ccm-page.sporofin-theme .offset-md-9 { margin-left: 75% !important; }
    .ccm-page.sporofin-theme .offset-md-10 { margin-left: 83.33333333% !important; }
    .ccm-page.sporofin-theme .offset-md-11 { margin-left: 91.66666667% !important; }
    .ccm-page.sporofin-theme .offset-md-12 { margin-left: 100% !important; }
}

@media (max-width: 560px) {
    .ccm-page.sporofin-theme .container {
        width: min(100% - 32px, 1168px);
    }

    .ccm-page.sporofin-theme .site-container .container {
        width: 100%;
    }
}