/*
---------------------------------------------------
Section center column widths
---------------------------------------------------
*/

@media (min-width:0) and (max-width:575px) {
    section.block-grid__row .col.center-col {
        flex: 0 0 var(--center-col);
        -ms-flex: 0 0 var(--center-col);
        max-width: var(--center-col);
    }
}

@media (min-width:576px) {
    section.block-grid__row .col.center-col {
        flex: 0 0 var(--center-col_sm);
        -ms-flex: 0 0 var(--center-col_sm);
        max-width: var(--center-col_sm);
    }
}

@media (min-width:768px) {
    section.block-grid__row .col.center-col {
        flex: 0 0 var(--center-col_md);
        -ms-flex: 0 0 var(--center-col_md);
        max-width: var(--center-col_md);
    }
}

@media (min-width:992px) {
    section.block-grid__row .col.center-col {
        flex: 0 0 var(--center-col_lg);
        -ms-flex: 0 0 var(--center-col_lg);
        max-width: var(--center-col_lg);
    }
}

@media (min-width:1200px) {
    section.block-grid__row .col.center-col {
        flex: 0 0 var(--center-col_xl);
        -ms-flex: 0 0 var(--center-col_xl);
        max-width: var(--center-col_xl);
    }
}



/*  
---------------------------------------------------
Intro / Outro column widths
---------------------------------------------------  
*/

@media (min-width:0) and (max-width:575px) {
    section.block-grid__row .component-intro .col {
        flex: 0 0 var(--intro-outro-col);
        -ms-flex: 0 0 var(--intro-outro-col);
        max-width: var(--intro-outro-col);
    }

    section.block-grid__row .component-outro .col {
        flex: 0 0 var(--intro-outro-col);
        -ms-flex: 0 0 var(--intro-outro-col);
        max-width: var(--intro-outro-col);
    }
}

@media (min-width:576px) {
    section.block-grid__row .component-intro .col {
        flex: 0 0 var(--intro-outro-col_sm);
        -ms-flex: 0 0 var(--intro-outro-col_sm);
        max-width: var(--intro-outro-col_sm);
    }

    section.block-grid__row .component-outro .col {
        flex: 0 0 var(--intro-outro-col_sm);
        -ms-flex: 0 0 var(--intro-outro-col_sm);
        max-width: var(--intro-outro-col_sm);
    }
}

@media (min-width:768px) {
    section.block-grid__row .component-intro .col {
        flex: 0 0 var(--intro-outro-col_md);
        -ms-flex: 0 0 var(--intro-outro-col_md);
        max-width: var(--intro-outro-col_md);
    }

    section.block-grid__row .component-outro .col {
        flex: 0 0 var(--intro-outro-col_md);
        -ms-flex: 0 0 var(--intro-outro-col_md);
        max-width: var(--intro-outro-col_md);
    }
}

@media (min-width:992px) {
    section.block-grid__row .component-intro .col {
        flex: 0 0 var(--intro-outro-col_lg);
        -ms-flex: 0 0 var(--intro-outro-col_lg);
        max-width: var(--intro-outro-col_lg);
    }

    section.block-grid__row .component-outro .col {
        flex: 0 0 var(--intro-outro-col_lg);
        -ms-flex: 0 0 var(--intro-outro-col_lg);
        max-width: var(--intro-outro-col_lg);
    }
}

@media (min-width:1200px) {
    section.block-grid__row .component-intro .col {
        flex: 0 0 var(--intro-outro-col_xl);
        -ms-flex: 0 0 var(--intro-outro-col_xl);
        max-width: var(--intro-outro-col_xl);
    }

    section.block-grid__row .component-outro .col {
        flex: 0 0 var(--intro-outro-col_xl);
        -ms-flex: 0 0 var(--intro-outro-col_xl);
        max-width: var(--intro-outro-col_xl);
    }
}