{
  "context": "This criteria evaluates how well the engineer uses @material/layout-grid package to implement responsive layouts with device-specific breakpoints. It focuses on correct usage of the grid structure classes, device-specific column spanning classes, and adherence to Material Design's responsive breakpoints.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Grid Structure",
      "description": "Uses the correct three-layer HTML structure: .mdc-layout-grid container wrapping .mdc-layout-grid__inner, which contains .mdc-layout-grid__cell elements for the product cards",
      "max_score": 25
    },
    {
      "name": "Desktop Spanning",
      "description": "Applies .mdc-layout-grid__cell--span-4-desktop to each product card cell to achieve 3 cards per row on desktop (4 columns × 3 = 12 columns)",
      "max_score": 20
    },
    {
      "name": "Tablet Spanning",
      "description": "Applies .mdc-layout-grid__cell--span-4-tablet to each product card cell to achieve 2 cards per row on tablet (4 columns × 2 = 8 columns)",
      "max_score": 20
    },
    {
      "name": "Phone Spanning",
      "description": "Applies .mdc-layout-grid__cell--span-4-phone to each product card cell to achieve 1 card per row on phone (4 columns × 1 = 4 columns)",
      "max_score": 20
    },
    {
      "name": "CSS Import",
      "description": "Includes the @material/layout-grid CSS file (either from CDN or local package) to enable the grid functionality",
      "max_score": 15
    }
  ]
}