Sass Media Queries

To use media-queries, just use the break-mixin:

.box {
  height: 20px;
  @include break(l) {
    height: 200px;
  }
}

The breakpoints are listed in the ./src/style/_setup.scss:

// Map with all breakpoints and related behavior
//
// @type map
//
// @prop {string} base.key                  - Breakpoint Name
// @prop {number} base.key.size             - The width that activate the Trigger
// @prop {bool}   base.key.step             - Set the threshold for the grid-stepper mixin
// @prop {number} base.key.fontsize         - Rewrite the Basefontsize for this breakpoint
$kittn-breakpoint-map: (
  'xs': (
    size: 320px,
    step: true,
    fontsize: false
  ),
  's': (
    size: 480px,
    step: false,
    fontsize: false
  ),
  'sm': (
    size: 560px,
    step: true,
    fontsize: false
  ),
  'm': (
    size: 768px,
    step: true,
    fontsize: 90
  ),
  'ml': (
    size: 960px,
    step: true,
    fontsize: 95
  ),
  'l': (
    size: 1180px,
    step: true,
    fontsize: 100
  )
);