{
  "context": "This criteria evaluates how well the engineer uses @material/layout-grid's CSS custom properties to implement runtime theme switching, focusing specifically on proper usage of the package's CSS variables for margins and gutters, correct grid structure, and device-specific column spanning.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Grid Structure",
      "description": "Uses the three-layer grid structure with .mdc-layout-grid container, .mdc-layout-grid__inner wrapper, and .mdc-layout-grid__cell elements for each card",
      "max_score": 15
    },
    {
      "name": "Column Spanning",
      "description": "Applies .mdc-layout-grid__cell--span-4-desktop, .mdc-layout-grid__cell--span-4-tablet, and .mdc-layout-grid__cell--span-4-phone classes (or equivalent universal .mdc-layout-grid__cell--span-4) to create the specified layout",
      "max_score": 15
    },
    {
      "name": "CSS Custom Properties",
      "description": "Uses CSS custom properties (--mdc-layout-grid-margin-desktop, --mdc-layout-grid-margin-tablet, --mdc-layout-grid-margin-phone, --mdc-layout-grid-gutter-desktop, --mdc-layout-grid-gutter-tablet, --mdc-layout-grid-gutter-phone) to define theme variations",
      "max_score": 30
    },
    {
      "name": "Compact Theme",
      "description": "Defines a compact theme CSS class that sets reduced values for margin and gutter custom properties (e.g., 12px or 16px) across all device types",
      "max_score": 10
    },
    {
      "name": "Default Theme",
      "description": "Ensures default Material Design spacing is maintained (24px margins/gutters on desktop, 16px on tablet/phone) either through no custom property overrides or explicit defaults",
      "max_score": 10
    },
    {
      "name": "Spacious Theme",
      "description": "Defines a spacious theme CSS class that sets increased values for margin and gutter custom properties (e.g., 32px-48px) across all device types",
      "max_score": 10
    },
    {
      "name": "Theme Application",
      "description": "Implements a mechanism to apply theme classes to the grid container dynamically, allowing the CSS custom properties to take effect at runtime",
      "max_score": 10
    }
  ]
}