// ********************************************************************************************************************* // Internals // ——————————————————————————————————————— // Do not change these definitions //

// Caculate the width ranges where the layout changes take place // $widest-min-width: $primary-column-min-width + $secondary-column-width + $tertiary-column-width; $medium-max-width: $widest-min-width - 1; $medium-min-width: $primary-column-min-width + $secondary-column-width; $narrow-max-width: $medium-min-width - 1;

@mixin narrow-layout {

@media screen and (min-width: 0px) and (max-width: $narrow-max-width) {
        @content
}

}

@mixin medium-layout {

@media screen and (min-width: $medium-min-width) and (max-width: $medium-max-width) {
        @content
}

}

@mixin widest-layout {

@media screen and (min-width: $widest-min-width) {
        @content
}

}

@mixin medium-and-widest-layout {

@media screen and (min-width: $medium-min-width) {
        @content
}

}