Breakpoints

For the most part, this site uses standard breakpoints that respond to the viewport width:

There are also special breakpoints if I need to restrict CSS to a certain viewport width:

Using the breakpoints in Less

Calling the breakpoints in Less can be done either nested, or wrapped, for example:

//nested
.elemnet {
  text-size: var(--step-0);
  @media @bp[mid] {
    text-size: var(--step-1);
  }
}

//wrapped
@media @bp[mid] {
  .element {
    text-size: var(--step-1);
  }
}