{
  "context": "This criteria evaluates the engineer's ability to customize @material/layout-grid's responsive breakpoints using Sass configuration. The focus is on properly using the $breakpoints and $default-gutter variables to override Material Design defaults with custom viewport thresholds.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Sass @use directive",
      "description": "Uses @use directive to import @material/layout-grid with a 'with' clause for configuration (not @import)",
      "max_score": 15
    },
    {
      "name": "$breakpoints variable",
      "description": "Correctly configures the $breakpoints variable map with custom thresholds: desktop: 1200px, tablet: 768px, phone: 0px",
      "max_score": 30
    },
    {
      "name": "$default-gutter variable",
      "description": "Correctly configures the $default-gutter variable map with custom values: desktop: 32px, tablet: 20px, phone: 12px",
      "max_score": 25
    },
    {
      "name": "CSS generation",
      "description": "Includes the necessary @use statement to generate CSS classes: @use \"@material/layout-grid/mdc-layout-grid\"",
      "max_score": 20
    },
    {
      "name": "Variable naming",
      "description": "Uses correct variable names from the package API (uses $breakpoints not $breakpoint-thresholds, $default-gutter not $gutters)",
      "max_score": 10
    }
  ]
}