/* Responsive breakpoints */

@mixin layout-xsmall {
  @media (max-width: #{$breakpoint-xsmall}) {
    @content;
  }
}

@mixin layout-small {
  @media (max-width: #{$breakpoint-small - 16px}) {
    @content;
  }
}

@mixin layout-medium {
  @media (max-width: #{$breakpoint-medium - 16px}) {
    @content;
  }
}

@mixin layout-large {
  @media (max-width: #{$breakpoint-large - 17px}) {
    @content;
  }
}

@mixin layout-xlarge {
  @media (min-width: #{$breakpoint-large - 16px}) {
    @content;
  }
}

@mixin layout-xsmall-and-up {
  @media (min-width: #{$breakpoint-xsmall - 300px}) {
    @content;
  }
}

@mixin layout-small-and-up {
  @media (min-width: #{$breakpoint-small - 300px}) {
    @content;
  }
}

@mixin layout-medium-and-up {
  @media (min-width: #{$breakpoint-small - 16px}) {
    @content;
  }
}

@mixin layout-large-and-up {
  @media (min-width: #{$breakpoint-medium - 16px}) {
    @content;
  }
}