Why is Foundation media queries not working when i use a breakpoint name?

Question

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

Any hints on what going on?

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)