$column-width: 50px;


$grid-gutter-widths: (
	xs: 15px,
	sm: 15px,
	md: 30px,
	lg: 30px,
  	xl: 48px
) !default;

@function get-gutter-width($breakpoint){
	@if map_has_key($grid-gutter-widths, $breakpoint) {
		@return map_get($grid-gutter-widths, $breakpoint); 
	}
}

//todo: size by col na responsive
@function size-by-col($col, $breakpoint: xs) {
	@return $col * $column-width + ($col - 1) * get-gutter-width($breakpoint);
}
$width-base: size-by-col(4,'xl');


$vertical-gutter: (
	xs: 15px,
	sm: 15px,
	md: 30px,
	lg: 30px,
  	xl: 48px
)!default;

@function get-vertical-margin($breakpoint){
	@if map_has_key($grid-vertical-margins, $breakpoint) {
		@return map_get($grid-vertical-margins, $breakpoint); 
	}
}