/* =====================================================
   Media
   ===================================================== */

/* Xtra-small */
@custom-media --upto-xsmall-screen screen and (width < map(breakpoints, xsmall));
@custom-media --from-xsmall-screen screen and (width >= map(breakpoints, xsmall));

/* Small */
@custom-media --upto-small-screen screen and (width < map(breakpoints, small));
@custom-media --from-small-screen screen and (width >= map(breakpoints, small));

/* Medium */
@custom-media --upto-medium-screen screen and (width < map(breakpoints, medium));
@custom-media --from-medium-screen screen and (width >= map(breakpoints, medium));

/* Large */
@custom-media --upto-large-screen screen and (width < map(breakpoints, large));
@custom-media --from-large-screen screen and (width >= map(breakpoints, large));

/* Shallow/Deep */
@custom-media --upto-shallow-screen screen and (height < 28rem);
@custom-media --from-shallow-screen screen and (height >= 28rem);
@custom-media --upto-deep-screen screen and (height < 36rem);
@custom-media --from-deep-screen screen and (height >= 36rem);

/* Other */
@custom-media --from-xlarge-screen screen and (width >= map(breakpoints, xlarge));
@custom-media --from-max-screen screen and (width >= map(breakpoints, max));
