@mixin breakpoint($point) {
  @if ($point == lg) {
    @media (min-width: $lg-min) {
      @content;
    }
  } @else if ($point == md) {
    @media (min-width: $md-min) and (max-width: $md-max) {
      @content;
    }
  } @else if ($point == sm) {
    @media (min-width: $sm-min) and (max-width: $sm-max) {
      @content;
    }
  } @else if ($point == xs) {
    @media (min-width: $xs-min) and (max-width: $xs-max) {
      @content;
    }
  } @else if ($point == xxs) {
    @media (max-width: $xxs-max) {
      @content;
    }
  }
}
// .example_class {
//   width: 100%;
//   height: 20px;
//   background-color: black;
//   @include breakpoint(md) {
//     width: 80%;
//   }
//   @include breakpoint(sm) {
//     width: 50%;
//   }
//   @include breakpoint(xs) {
//     width: 20%;
//   }
//   @include breakpoint(xxs) {
//     width: 5%;
//   }
// }