/**
 * We use a mobile first approach
 */
@mixin grid-media-query($media-query) {
    @if $media-query == palm {
        .mobile &, .tablet .portrait & {
            @media only screen and (max-width: 1025px) {
                @content;
            }
        }
    }
    @if $media-query == iphoneX {
        @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { 
            @content;
        }
    }
    @if $media-query == not-palm {
        .desktop &, .tablet .landscape & {
            @media only screen and (min-width: 1026px) {
                @content;
            }
        }
    }
    /*@if $media-query == tablet-portrait {
            @media only screen and (orientation: portrait) {
                .tablet & {
                    @content;
                }
            }
    }*/
    @if $media-query == big-desk {
        .desktop & {
            @media only screen and (min-width: 1920px) {
                @content;
            }
        }
    }
}





/**
 * Media query mixin.
 * *
 * We define some broad breakpoints in our vars file that are picked up here
 * for use in a simple media query mixin. Our options are:
 *
 * palm
 * lap
 * lap-and-up
 * portable
 * desk
 * desk-wide
 *
 * Not using a media query will, naturally, serve styles to all devices.
 *
 * `@include grid-media-query(palm){ [styles here] }`
 *
 * We work out your end points for you:
 */
/*
 $lap-start: 681px;
 $desk-start: 1025px;
 $desk-wide-start: 1280px;
 $desk-small: 1100px;
 $lap-small: 900px;
 
 $palm-end: $lap-start - 1px;
 $lap-end: $desk-start - 1px;
 
 @mixin grid-media-query($media-query) {
     @if $media-query == palm {
         @media only screen and (max-width: $palm-end) {
             @content;
         }
     }
     @if $media-query == lap {
         @media only screen and (min-width: $lap-start) and (max-width: $lap-end) {
             @content;
         }
     }
     @if $media-query == lap-and-up {
         @media only screen and (min-width: $lap-start) {
             @content;
         }
     }
     @if $media-query == portable {
         @media only screen and (max-width: $lap-end) {
             @content;
         }
     }
     @if $media-query == desk {
         @media only screen and (min-width: $desk-start) {
             @content;
         }
     }
     @if $media-query == desk-wide {
         @media only screen and (min-width: $desk-wide-start) {
             @content;
         }
     }
     @if $media-query == small-desk {
         @media only screen and (min-width: $desk-start) and (max-width: $desk-small) {
             @content;
         }
     }
     @if $media-query == large-desk {
         @media only screen and (min-width: $desk-small) {
             @content;
         }
     }
     @if $media-query == small-lap {
         @media only screen and (min-width: $lap-start) and (max-width: $lap-small) {
             @content;
         }
     }
     @if $media-query == large-lap {
         @media only screen and (min-width: $lap-small) and (max-width: $lap-end) {
             @content;
         }
     }
 }
 */
