$breakpoints: (
  xs: (
    name: xs,
    min-viewport-width: null,
    columns: 4,
    gutter-width: 16,
  ),
  sm: (
    name: sm,
    min-viewport-width: 600,
    columns: 8,
    gutter-width: 16,
  ),
  md: (
    name: md,
    min-viewport-width: 768,
    columns: 8,
    gutter-width: 24,
  ),
  lg: (
    name: lg,
    min-viewport-width: 1024,
    columns: 12,
    gutter-width: 24,
  ),
  xl: (
    name: xl,
    min-viewport-width: 1280,
    columns: 12,
    gutter-width: 24,
  ),
  xxl: (
    name: xxl,
    min-viewport-width: 1600,
    columns: 12,
    gutter-width: 24,
  ),
  xxxl: (
    name: xxxl,
    min-viewport-width: 1920,
    columns: 12,
    gutter-width: 24,
  ),
);