Foundation 6 media queries not working

[mannclay]

I have tested other JS components like accordions and they work fine. For some reason media queries are not working as expected.

For example:
.header-first, .header-second { @include breakpoint(medium) { background: $cerulean; } }

compiles to the below where the name of the breakpoint is added but not the size of 640px as in the _settings.scss:

@media (min-width: medium) { .header .header-first, .header .header-second { background: #0098db;} }

I have tested that _settings.scss is working by customizing other components. I have also tested that the JS is working with:
console.log('Current: ' + Foundation.MediaQuery.current)

Any hints on what going on?