$grid: (
  'column-color': rgba(255, 0, 0, 0.1),
  'base': (
    'container': (
      'width': 1920px,
      'padding': (
        'x': 16px,
        'y': 0px,
      ),
    ),
    'column': (
      'width': (
        'min': 0px,
        'max': 1fr,
      ),
      'gap': 32px,
      'count': 12,
    ),
  ),
  'media': (
    'breakpoint': (
      'xl',
      'lg',
      'md',
      'sm',
    ),
    'xl': (
      'max-width': 1200px,
      'container': (
        'width': 1920px,
        'padding': (
          'x': 16px,
          'y': 0px,
        ),
      ),
      'column': (
        'width': (
          'min': 0px,
          'max': 1fr,
        ),
        'gap': 32px,
        'count': 12,
      ),
    ),
    'lg': (
      'max-width': 992px,
      'container': (
        'width': 1920px,
        'padding': (
          'x': 16px,
          'y': 0px,
        ),
      ),
      'column': (
        'width': (
          'min': 0px,
          'max': 1fr,
        ),
        'gap': 32px,
        'count': 8,
      ),
    ),
    'md': (
      'max-width': 768px,
      'container': (
        'width': 1920px,
        'padding': (
          'x': 16px,
          'y': 0px,
        ),
      ),
      'column': (
        'width': (
          'min': 0px,
          'max': 1fr,
        ),
        'gap': 32px,
        'count': 6,
      ),
    ),
    'sm': (
      'max-width': 576px,
      'container': (
        'width': 1920px,
        'padding': (
          'x': 16px,
          'y': 0px,
        ),
      ),
      'column': (
        'width': (
          'min': 0px,
          'max': 1fr,
        ),
        'gap': 32px,
        'count': 4,
      ),
    ),
  ),
);