$breakpoint-xxs: 330px;
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1330px;

@mixin media-xxs-up {
    @media (min-width: $breakpoint-xxs) { @content; }
}
@mixin media-xs-up {
    @media (min-width: $breakpoint-xs) { @content; }
}
@mixin media-sm-up {
    @media (min-width: $breakpoint-sm) { @content; }
}
@mixin media-md-up {
    @media (min-width: $breakpoint-md) { @content; }
}
@mixin media-lg-up {
    @media (min-width: $breakpoint-lg) { @content; }
}
@mixin media-xl-up {
    @media (min-width: $breakpoint-xl) { @content; }
}
@mixin media-xxl-up {
    @media (min-width: $breakpoint-xxl) { @content; }
}
@mixin media-xxs-down {
    @media (max-width: $breakpoint-xxs - 0.02) { @content; }
}
@mixin media-xs-down {
    @media (max-width: $breakpoint-xs - 0.02) { @content; }
}
@mixin media-sm-down {
    @media (max-width: $breakpoint-sm - 0.02) { @content; }
}
@mixin media-md-down {
    @media (max-width: $breakpoint-md - 0.02) { @content; }
}
@mixin media-lg-down {
    @media (max-width: $breakpoint-lg - 0.02) { @content; }
}
@mixin media-xl-down {
    @media (max-width: $breakpoint-xl - 0.02) { @content; }
}
@mixin media-xxl-down {
    @media (max-width: $breakpoint-xxl - 0.02) { @content; }
}
@mixin media-between-sm-xxl {
    @media (min-width: $breakpoint-sm) and (max-width: $breakpoint-xxl - 0.02) { @content; }
}
