@mixin transition {
  transition: all $transition-duration $transition-timing-function;
}

@mixin media-screen-gt($breakpoint) {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin media-screen-gt-sm {
  @include media-screen-gt($break-sm) {
    @content;
  }
}

@mixin media-screen-gt-md {
  @include media-screen-gt($break-md) {
    @content;
  }
}

@mixin media-screen-gt-lg {
  @include media-screen-gt($break-lg) {
    @content;
  }
}

@mixin media-screen-gt-xl {
  @include media-screen-gt($break-xl) {
    @content;
  }
}

@mixin media-screen-width-breakpoints {
  @include media-screen-gt-sm {
    max-width: $break-sm;
  }

  @include media-screen-gt-md {
    max-width: $break-md;
  }

  @include media-screen-gt-md {
    max-width: $break-md;
  }

  @include media-screen-gt-xl {
    max-width: $break-xl;
  }
}




@mixin foreground {
  z-index: $foreground-index;
}