{
  "context": "This criteria evaluates how well the engineer uses @material/layout-grid's custom column configuration feature to implement a non-default grid system with 16 desktop columns, 12 tablet columns, and 6 phone columns.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Sass module import",
      "description": "Uses @use directive to import @material/layout-grid with configuration options (not @import)",
      "max_score": 15
    },
    {
      "name": "$columns variable configuration",
      "description": "Correctly configures the $columns variable with a map containing desktop: 16, tablet: 12, phone: 6",
      "max_score": 35
    },
    {
      "name": "Grid styles inclusion",
      "description": "Includes the mdc-layout-grid styles using @use \"@material/layout-grid/mdc-layout-grid\"",
      "max_score": 15
    },
    {
      "name": "Desktop column count",
      "description": "The generated grid system correctly implements 16 columns on desktop breakpoint (≥840px)",
      "max_score": 15
    },
    {
      "name": "Tablet column count",
      "description": "The generated grid system correctly implements 12 columns on tablet breakpoint (600-839px)",
      "max_score": 10
    },
    {
      "name": "Phone column count",
      "description": "The generated grid system correctly implements 6 columns on phone breakpoint (<600px)",
      "max_score": 10
    }
  ]
}