/* =============================================================
* RESPONSIVE LAYOUT HELPERS
* ============================================================*/
$tablet: '(min-width: 480px) and (max-width: 767px)';
$phone: '(max-width: 479px)';
$desktop: '(min-width: 768px)';
$up-to-tablet: '(max-width: 767px)';
$extra-small-screen: '(max-width: 23em)';

@mixin focusStyle() {
  &:focus {
    outline: none
  }
}

@mixin device($device-widths) {
  @media screen and #{$device-widths} {
    @content
  }
}