/**
 * Bootstrap grid subset for Visual Builder grid-section (bootstrap row mode).
 * B2B multi-column content uses two-columns / three-columns in styles.css instead.
 */

.vb-grid-section > [class*='container'] > .row,
section.builder:not(.page_topline) > [class*='container'] > .row {
    --vb-gutter-x: 30px;
    --vb-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--vb-gutter-y) * -1);
    margin-right: calc(var(--vb-gutter-x) * -0.5);
    margin-left: calc(var(--vb-gutter-x) * -0.5);
}

.vb-grid-section > [class*='container'] > .row > [class*='col-'],
section.builder:not(.page_topline) > [class*='container'] > .row > [class*='col-'] {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--vb-gutter-x) * 0.5);
    padding-left: calc(var(--vb-gutter-x) * 0.5);
    margin-top: var(--vb-gutter-y);
}

.vb-grid-section.table_section > [class*='container'] > .row,
section.builder:not(.page_topline).table_section > [class*='container'] > .row {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    height: auto;
    margin-left: calc(var(--vb-gutter-x) * -0.5);
    margin-right: calc(var(--vb-gutter-x) * -0.5);
}

.vb-grid-section.table_section > [class*='container'] > .row > [class*='col-'],
section.builder:not(.page_topline).table_section > [class*='container'] > .row > [class*='col-'] {
    display: block;
    float: none;
    vertical-align: initial;
}

@media (max-width: 991px) {
    .vb-grid-section.table_section.table_section_md > [class*='container'] > .row,
    section.builder:not(.page_topline).table_section.table_section_md > [class*='container'] > .row {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 767px) {
    .vb-grid-section.table_section > [class*='container'] > .row,
    section.builder:not(.page_topline).table_section > [class*='container'] > .row {
        display: flex;
        flex-wrap: wrap;
    }
}

/* B2B subset only: 3, 4, 6, 8, 9, 12 */
@media (min-width: 576px) {
    .col-sm-3 { flex: 0 0 auto; width: 25%; }
    .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
    .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-sm-9 { flex: 0 0 auto; width: 75%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}