@mixin media-breakpoint-down($size) {
    @if $size == xs {
      @media (max-width: 576px) { @content; }
    } @else if $size == sm {
      @media (max-width: 768px) { @content; }
    } @else if $size == md {
      @media (max-width: 992px) { @content; }
    } @else if $size == lg {
      @media (max-width: 1200px) { @content; }
    } @else if $size == xxl {
      @media (max-width: 1400px) { @content; }
    }
  }
  @mixin media-breakpoint-up($size) {
    @if $size == xs {
      @media (min-width: 576px) { @content; }
    } @else if $size == sm {
      @media (min-width: 768px) { @content; }
    } @else if $size == md {
      @media (min-width: 992px) { @content; }
    } @else if $size == lg {
      @media (min-width: 1200px) { @content; }
    } @else if $size == xxl {
      @media (min-width: 1400px) { @content; }
    }
  }