$grid-columns:              12 !default;
$grid-gutter-width-base:    16px !default;
$grid-gutter-width-desktop: 24px !default;

$grid-gutter-widths: (
  xs: $grid-gutter-width-base,
  sm: $grid-gutter-width-base,
  md: $grid-gutter-width-desktop,
  lg: $grid-gutter-width-desktop,
  xl: $grid-gutter-width-desktop
) !default;

// Breakpoint
// Based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 960px,
  lg: 1280px,
  xl: 1920px
) !default;

@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
@include _assert-starts-at-zero($grid-breakpoints);

// Container width
// Based on https://material.google.com/layout/responsive-ui.html#responsive-ui-breakpoints

$container-max-widths: (
  sm: 600px,
  md: 840px,
  lg: 1024px,
  xl: 1600px
) !default;

@include _assert-ascending($container-max-widths, '$container-max-widths');