@mixin media-breakpoint-down($name) {
  @if $name == sm {
    @media (max-width: 767px) {
      @content;
    }
  }
  @if $name == md {
    @media (max-width: 991px) {
      @content;
    }
  }
  @if $name == lg {
    @media (max-width: 1199px) {
      @content;
    }
  }
  @if $name == xl {
    @media (max-width: 1399px) {
      @content;
    }
  }
}