@mixin font-smoothing($value: on) {
  @if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  } @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

@mixin aspect-ratio($ratio) {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: percentage(1 / $ratio);
  background-size: 100%;
}

@mixin fill-area {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@mixin mobile {
  @media (max-width: $screen-xs-max) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $screen-lg-min) {
    @content;
  }
}