$size__site_content_width: 1024px;

$media_queries: (
    'mobile': 'only screen and (max-width: 767px)',
    'tablet': 'only screen and (min-width: 768px) and (max-width: 1200px)',
    'desktop': 'only screen and (min-width: 1201px)',
    'retina2':
        'only screen and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)',
    'retina3':
        'only screen and (-webkit-min-device-pixel-ratio: 3) and (min-resolution: 288dpi)',
    'landscape': 'screen and (orientation:landscape) ',
    'portrait': 'screen and (orientation:portrait) ',
    'mid': 'screen and (min-width: 1800px)',
    'large': 'screen and (min-width: 2401px)',
);

// @mixin breakpoint($breakpoints) {
//     $conditions: ();

//     @each $breakpoint in $breakpoints {
//         // If the key exists in the map
//         $conditions: append(
//             $conditions,
//             #{inspect(map-get($media_queries, $breakpoint))},
//             comma
//         );
//     }

//     @media #{$conditions} {
//         @content;
//     }
// }

@mixin responsive($start, $end) {
    @media only screen and (min-width: #{$start}px) {
        @content;
    }
}

@mixin mobile {
    @media only screen and (max-width: 767px) {
        @content;
    }
}

@mixin mobile-tablet {
    @include mobile {
        @content;
    }

    @include tablet {
        @content;
    }
}

@mixin tablet {
    @media only screen and (min-width: 768px) and (max-width: 1200px) {
        @content;
    }
}

@mixin desktop {
    @media only screen and (min-width: 1201px) {
        @content;
    }
}