@use 'sass:map';

$breakpoints:(

    desktop :1040px,
    tablet  :876px,
    mobile  :440px,
    2560    : 2560px,
    1890    : 1891px,
    1440    : 1441px,
    1024    : 1025px,
    915     : 915px,
    876     : 876px,
    640     : 640px,
    430     : 430px,
    375     : 375px,
    320     : 320px,
    xl      :1440px,
); 



@mixin mq($key) {
    $size: map.get($breakpoints,$key);
    @media only screen and (max-width: $size){
        @content;
    }
}
@mixin mqlandscape($key) {
    $size: map.get($breakpoints,$key);
    @media only screen and (max-width: $size) and (orientation: landscape){
        @content;
    }
}
@mixin mqheight($key) {
    $size: map.get($breakpoints,$key);
    @media only screen and (max-height: $size){
        @content;
    }
}

@mixin mode($key){

}