{
  "context": "This criteria evaluates how well an engineer uses the @material/layout-grid package to implement column spanning functionality, including both universal and device-specific span classes to create a responsive product showcase layout.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Three-layer structure",
      "description": "Uses the correct three-layer grid structure: .mdc-layout-grid container, .mdc-layout-grid__inner wrapper, and .mdc-layout-grid__cell for each product card",
      "max_score": 20
    },
    {
      "name": "Universal spanning",
      "description": "Applies .mdc-layout-grid__cell--span-4 class to regular product cards to make them span 4 columns universally across all devices",
      "max_score": 20
    },
    {
      "name": "Desktop-specific spanning",
      "description": "Uses .mdc-layout-grid__cell--span-8-desktop on the featured card to make it span 8 columns on desktop viewports (≥840px)",
      "max_score": 20
    },
    {
      "name": "Tablet-specific spanning",
      "description": "Uses .mdc-layout-grid__cell--span-4-tablet on the featured card to make it span 4 columns on tablet viewports (600-839px)",
      "max_score": 20
    },
    {
      "name": "Phone-specific spanning",
      "description": "Uses .mdc-layout-grid__cell--span-4-phone (or relies on default behavior) on the featured card for full-width display on phone viewports (<600px)",
      "max_score": 10
    },
    {
      "name": "Package integration",
      "description": "Properly imports and includes the @material/layout-grid CSS/Sass files in the HTML page",
      "max_score": 10
    }
  ]
}