Neat 2.0 tablet media query not working

Question

In Neat 1.8 I used 3 breakpoints for my media queries and they where as follows:

$mobile: new-breakpoint(min-width 320px max-width 767px);
$tablet: new-breakpoint(min-width 768px max-width 1024px);
$desktop: new-breakpoint(min-width 1025px);

But in Neat 2.0 I just can´t get the $tablet media query to work, only desktop and $mobile work, but bypasses $tablet completely.

My SCSS file

$neat-grid: (
 columns: 12,
 gutter: 2em,
);

$mobile: (
 columns: 12,
 gutter: 1em,
 media: 'screen and (min-width: 320px) and (max-width: 767px)'
);

$tablet: (
 columns: 12,
 gutter: 1.1em,
 media: 'screen and (min-width 768px max-width 1024px)'
);

.element {
 @include grid-column(3);

 @include grid-media($mobile){
   @include grid-column(4);
 }

 @include grid-media($tablet){
   @include grid-column(6);
 }
}

My sites are simple and therefore I like to use a range for my media queries e.g: (min-width 768px max-width 1024px. This working perfectly for Neat 1.8 but after upgrading I can't get $tablet to work.

What am I missing??

Answer 1

I think the issue is that your SCSS is slightly wrong for the tablet section. Try this:

$tablet: (
 columns: 12,
 gutter: 1.1em,
 media: 'screen and (min-width 768px) and (max-width 1024px)'
);