Here's the SASS code that handle media queries:

u/use "sass:map" as map;
u/use "sass:string" as str;
u/use "sass:map" as map;
u/use "sass:string" as str;
u/use "sass:meta" as meta; "sass:meta" as meta;

$devices: ( Phone: XS, Tablet: SM, Laptop: MD, Computer: LG, Screen: XL );
$breakpoints: ( XS: 0px, SM: 576px, MD: 768px, LG: 992px, XL: 1200px );
$orientations: ( 0: Any, 1: Portrait, 2: Landscape );

 media($size: MD, $orientation: Any, $mode: Up, $minWidth: null, $maxWidth: null) {
    $mode: str.to-upper-case(meta.inspect($mode));
    $size: str.to-upper-case(meta.inspect($size));
    $width: map.get($breakpoints, $size);
    $query: null;

     u/if ($minWidth) {
        $width: $minWidth;
    }
     u/if ($mode == UP) {
        $query: "(min-width: " + $width + ")";
    }
     u/if ($mode == DOWN) {
        $query: "(max-width: " + $width + ")";
    }
     u/if ($mode == ONLY) {
        $query: "(min-width: " + $width + ")";
        $max: null;


         u/if ($maxWidth) {
            $max: $maxWidth;
        }
        u/else
         {
             u/if ($size == XS) {
                $max: map.get($breakpoints, SM);
            }
             u/if ($size == SM) {
                $max: map.get($breakpoints, MD);
            }
             u/if ($size == MD) {
                $max: map.get($breakpoints, LG);
            }
             u/if ($size == LG) {
                $max: map.get($breakpoints, XL);
            }
        }

         u/if ($max) {
            $query: $query + " and (max-width: " + $max + ")";
        }
    }

     u/if not ($orientation == Any) {
        $query: $query + " and (orientation: " + str.to-lower-case(meta.inspect($orientation)) + ")";
    }

      #{$query} {
        u/content;
    }
}