@mixin margin-reset() {
    margin:0;
}

@mixin mq($width, $type: min) {
    @if map_has_key($grid-breakpoints, $width) {
        $width: map_get($grid-breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

@mixin margin-flow(){
	margin-top: get-gutter-width('xs');
	margin-bottom:  get-gutter-width('xs');
	@include mq('md') {
		margin-bottom:  get-gutter-width('md');
		margin-top:  get-gutter-width('md');
	}
	@include mq('lg') {
		margin-bottom:  get-gutter-width('lg');
		margin-top:  get-gutter-width('lg');
	}
	@include mq('xl') {
		margin-bottom:  get-gutter-width('xl');
		margin-top:  get-gutter-width('xl');
	}    
}

@mixin vertical-gutter-flow($xs:1, $md:1, $lg:1, $xl:1){
	margin-bottom:  get-gutter-width('xs') * $xs;
	@include mq('md') {
		margin-bottom:  get-gutter-width('md')* $md;
	}
	@include mq('lg') {
		margin-bottom:  get-gutter-width('lg')* $lg;
	}
	@include mq('xl') {
		margin-bottom:  get-gutter-width('xl')* $xl;
	}    
}