$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;

@mixin respond($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

@mixin respond-sm {
  @include respond($breakpoint-sm) {
    @content;
  }
}

@mixin respond-md {
  @include respond($breakpoint-md) {
    @content;
  }
}

@mixin respond-lg {
  @include respond($breakpoint-lg) {
    @content;
  }
}

@mixin respond-xl {
  @include respond($breakpoint-xl) {
    @content;
  }
}