mixins.scss

// The max-widths for the breakpoints
$breakpoints: (
    small: 568px,
    medium: 1000px,
    large: 1180px,
);

$breakpoints: map-merge($breakpoints, (
    small-only: max-width map-get($breakpoints, 'medium'),
    medium-only: (map-get($breakpoints, 'small') + 1px) map-get($breakpoints, 'medium'),
    large-only: (map-get($breakpoints, 'medium') + 1px) map-get($breakpoints, 'large')
));

// @mixin at-small {
//     @include breakpoint(max-width 320px) {
//         @include with-layout($small-grid) {
//             @content;
//         }
//     }
// }

@mixin at-small-only {
    @include breakpoint(map-get($breakpoints, 'small-only')) {
        @include with-layout($small-grid) {
            @content;
        }
    }
}

@mixin at-medium {
    @include breakpoint(map-get($breakpoints, 'small') + 1px) {
        @include with-layout($medium-grid) {
            @content;
        }
    }
}

@mixin at-medium-only {
    @include breakpoint(map-get($breakpoints, 'medium-only')) {
        @include with-layout($medium-grid) {
            @content;
        }
    }
}

@mixin at-large {
    @include breakpoint(map-get($breakpoints, 'medium') + 1px) {
        @include with-layout($large-grid) {
            @content;
        }
    }
}

@mixin at-large-only {
    @include breakpoint(map-get($breakpoints, 'large-only')) {
        @include with-layout($large-grid) {
            @content;
        }
    }
}

@mixin at-xlarge {
    @include breakpoint(map-get($breakpoints, 'large') + 1px) {
        @include with-layout($xlarge-grid) {
            @content;
        }
    }
}

@mixin at-large-and-xlarge {
    @include at-large { @content; }
    @include at-xlarge { @content; }
}