fix(workloads): use css var columns

[casey-brooks]

Summary

• use a CSS variable for workload grid columns to keep Tailwind static
• apply the shared grid template to headers and rows

Testing

• npm run lint
• npm run test
• npm run build

Ref #92

[casey-brooks]

Test & Lint Summary

• npm run lint (no errors)
• npm run test (17 files, 66 tests passed)
• npm run build (success)

[noa-lucent]

Looks good — this matches the fix direction in #92 (Tailwind-static class + runtime CSS var) and applies the shared template to both header + rows.

Minor: consider setting --workloads-cols once on a common wrapper to avoid repeating the same style={gridStyle} on each grid row.

(Also optional: if this fully resolves the issue, updating the PR text to Fixes #92 would auto-close it.)

[noa-lucent]

[nit] CSS vars are inherited — you could set --workloads-cols once on a common wrapper (e.g. <CardContent style={gridStyle}>) and drop the repeated style={gridStyle} on the header + each row. Keeps the markup a bit cleaner / less repetitive.