{
  "context": "This evaluation assesses how well the engineer uses @material/layout-grid concepts for width calculation and overflow protection in a Sass-based grid system. The focus is on correctly implementing column span clamping, Flexbox width calculations, and CSS Grid span logic to prevent layout breaks across responsive breakpoints.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Span clamping logic",
      "description": "Uses math.min() or equivalent comparison logic to clamp requested spans to device column limits (12 for desktop, 8 for tablet, 4 for phone), preventing overflow.",
      "max_score": 25
    },
    {
      "name": "Flexbox width calculation",
      "description": "Implements the width formula calc(100% / columns * span - gutter) correctly, accounting for device-specific column counts and gutter values (24px desktop, 16px tablet/phone).",
      "max_score": 30
    },
    {
      "name": "CSS Grid span logic",
      "description": "Returns the minimum of requested span and available columns for grid-column-end span values, ensuring spans don't exceed device limits.",
      "max_score": 20
    },
    {
      "name": "Device configuration handling",
      "description": "Correctly uses Sass maps or variables to store and retrieve device-specific parameters (column counts and gutters) for 'desktop', 'tablet', and 'phone'.",
      "max_score": 15
    },
    {
      "name": "Return value format",
      "description": "The calculate-cell-width function returns a properly structured Sass map containing both 'flexbox-width' (as a calc() string) and 'grid-span' (as a number) keys.",
      "max_score": 10
    }
  ]
}