Imagine this:

'custom': {
    '$columnWidth': '20px',
    '$gutter': {
        'sm': '10px',
        'md': '15px',
        'lg': '20px'
    }
}

Then in the markup:

<div class="P($gutter)"></div>

The same class in the markup will create a different padding around the box depending on breakpoints.
And changes are made via the config object — not via markup (same as if we were editing a rule in a style sheet).