html div.cta-bar {
    --_pattern-vertical-attr: 12rem;
    background-image: unset;
    position: relative;
    margin-block-start: calc(var(--_pattern-vertical-attr) * 1);
    > *:not(:is(&::after)) {
        z-index: 1;
    }
    &::after {
        content: "";
        position: absolute;
        inline-size: 100%;
        block-size: calc(100% + var(--_pattern-vertical-attr));
        inset: calc(var(--_pattern-vertical-attr) * -1) 0 0 0;
        background-image: url('../images/2026-brand-updates/texture_paint-splatter_fnl_rgb_pine_seperate_02.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 0;
    }

    @media screen and (max-width: 74.9375em) {
        /* --_pattern-vertical-attr: 6rem; */
        --_pattern-vertical-attr: 0rem;
        overflow: clip visible;
        &::after {
            /* Relace current splatter image with vertically oriented one */
        }
    }
}