// We only use 2 breakpoints because normally we design for 3 screen: phone, tablet and desktop // There's no point in having more than these breakpoints if we're not going to provide design for them
$big-screen: 768px; $small-screen: 576px;
$big-screen-w-sidenav: 1038px; $small-screen-w-sidenav: 846px;
$S-only: 'only screen and (max-width: #{$small-screen - 1})'; $M-only: 'only screen and (min-width: #{$small-screen} ) and (max-width: #{$big-screen - 1})'; $M-plus: 'only screen and (min-width: #{$small-screen} )'; $M-less: 'only screen and (max-width: #{$big-screen - 1})'; $L-plus: 'only screen and (min-width: #{$big-screen})';
.Vlt-S-only {
@media #{$M-plus} { display: none !important; }
}
.Vlt-M-only {
@media #{$S-only} { display: none !important; } @media #{$L-plus} { display: none !important; }
}
.Vlt-L-plus {
@media #{$M-less} { display: none !important; }
}
.Vlt-M-plus {
@media #{$S-only} { display: none !important; }
}
.Vlt-M-less {
@media #{$L-plus} { display: none !important; }
}