/* Screen Size Definations
=============================== */
$screen-xs: 320px;
$screen-xs-l: 425px;
$screen-sm: 576px;
$screen-md: 768px;
$screen-md-l: 870px;
$screen-lg: 992px;
$screen-lg-x: 1024px;
$screen-lg-xx: 1150px;
$screen-xl: 1200px;
$screen-xl-s: 1230px;
$screen-xl-l:1300px;
$screen-xxl: 1400px;
$screen-3-xl: 1496px;
$screen-4-xl: 1728px;
$screen-5-xl: 2056px;
$screen-6-xl: 3400px;

/* Mixins - min width
================================ */
@mixin media {
    @media (width: #{$screen-md-x}) {
        @content;
    }
}

@mixin media-min-xs {
    @media (min-width: #{$screen-xs}) {
        @content;
    }
}

@mixin media-min-xs-l {
    @media (min-width: #{$screen-xs-l}) {
        @content;
    }
}

@mixin media-min-sm {
    @media (min-width: #{$screen-sm}) {
        @content;
    }
}

@mixin media-min-md {
    @media (min-width: #{$screen-md}) {
        @content;
    }
}

@mixin media-min-md-l {
    @media (min-width: #{$screen-md-l}) {
        @content;
    }
}

@mixin media-min-lg {
    @media (min-width: #{$screen-lg}) {
        @content;
    }
}

@mixin media-min-lg-x {
    @media (min-width: #{$screen-lg-x}) {
        @content;
    }
}

@mixin media-min-lg-xx {
    @media (min-width: #{$screen-lg-xx}) {
        @content;
    }
}

@mixin media-min-xl {
    @media (min-width: #{$screen-xl}) {
        @content;
    }
}
@mixin media-min-xl-s {
    @media (min-width: #{$screen-xl-s}) {
        @content;
    }
}
@mixin media-min-xl-l {
    @media (min-width: #{$screen-xl-l}) {
        @content;
    }
}

@mixin media-min-xxl {
    @media (min-width: #{$screen-xxl}) {
        @content;
    }
}

@mixin media-min-3-xl {
    @media (min-width: #{$screen-3-xl}) {
        @content;
    }
}

@mixin media-min-4-xl {
    @media (min-width: #{$screen-4-xl}) {
        @content;
    }
}

@mixin media-min-5-xl {
    @media (min-width: #{$screen-5-xl}) {
        @content;
    }
}

@mixin media-min-6-xl {
    @media (min-width: #{$screen-6-xl}) {
        @content;
    }
}

/* Mixins - max width
================================ */

@mixin media-max-sm {
    @media (max-width: #{$screen-sm}) {
        @content;
    }
}

@mixin media-max-xs {
    @media (max-width: #{$screen-xs}) {
        @content;
    }
}

@mixin media-max-xs-l {
    @media (max-width: #{$screen-xs-l}) {
        @content;
    }
}

@mixin media-max-md {
    @media (max-width: #{$screen-md}) {
        @content;
    }
}

@mixin media-max-md-l {
    @media (max-width: #{$screen-md-l}) {
        @content;
    }
}

@mixin media-max-lg {
    @media (max-width: #{$screen-lg}) {
        @content;
    }
}

@mixin media-max-lg-x {
    @media (max-width: #{$screen-lg-x}) {
        @content;
    }
}

@mixin media-max-xl {
    @media (max-width: #{$screen-xl}) {
        @content;
    }
}

@mixin media-max-xl-l {
    @media (max-width: #{$screen-xl-l}) {
        @content;
    }
}

@mixin media-max-xxl {
    @media (max-width: #{$screen-xxl}) {
        @content;
    }
}

@mixin media-print {
    @media print {
        @content;
    }
}