Custom Interchange queries with Foundation 6

I'm trying to add a custom media query to Interchange for retina laptops, but it doesn't seem to be picking up. I'm sure something is in the wrong place or there's wrong syntax somewhere. Any ideas?

HTML:

<div 
class="responsive-bg" 
data-interchange="
    [http://brycekirk.com/man-mountain/small.jpg, small], 
    [http://brycekirk.com/man-mountain/medium.jpg, medium], 
    [http://brycekirk.com/man-mountain/large.jpg, large], 
    [http://brycekirk.com/man-mountain/xlarge.jpg, xlarge]
    [http://brycekirk.com/man-mountain/largeretina.jpg, largeretina]"></div>

CSS:

div.responsive-bg {height: 100vh; width: 100%; position: absolute; }

JS:

$(document).foundation();
Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';

Interchange Documentation

Codepen

It is NOT working because you are add custom query after the Foundation has initialize, you have to use Foundation reflow or you can set the media query before init code.

Foundation.Interchange.SPECIAL_QUERIES['largeretina'] = 'only screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)';

$(document).foundation();