/**
 * Content Columns block — stack columns on mobile (all zzzippysites using master theme).
 * Neutralizes grid.css .row { max-width: 90% }, block % widths, and double horizontal padding.
 */
@media (max-width: 768px) {
    #main .content-columns-wrapper,
    #main .content-columns-wrapper .content-columns,
    #main .content-columns,
    #main .content-columns[id^="pf-"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /*
     * Full viewport bleed: block background must cover body (often white)
     * when wrapper has a custom Background_Color.
     */
    #main .ccm-block-content-columns,
    #main .content-columns-wrapper {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box;
    }

    #main .content-columns-wrapper .content-columns {
        width: 100% !important;
        max-width: 100% !important;
    }

    #main .content-columns .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #main .content-columns .row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 1.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #main .content-columns .colFlex,
    #main .content-columns a.colFlex {
        flex: 0 0 auto !important;
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }

    #main .content-columns a.colFlex {
        display: block !important;
    }

    #main .content-columns .image-wrapper,
    #main .content-columns .content-columns-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block !important;
    }

    #main .content-columns .content-column-content {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 4vw !important;
        padding-right: 4vw !important;
        box-sizing: border-box;
    }
}