refactor: shorten class names in layout lessons for easier typing

- flexbox.json: .flex-container → .wrap
- grid.json: .grid-container → .grid, .grid-layout → .page,
  .responsive-grid → .cards, .align-grid → .cells, .overlap-grid → .stack
- 07-layouts.json: .flex-container → .flex, .flex-item → .item,
  .grid-container → .grid
- CLAUDE.md: add short class names rule (1-2 syllables max)

lessons/08-responsive.json

@@ -108,7 +108,12 @@
 					"message": "Use <kbd>@media (min-width: 768px)</kbd>",
 					"options": { "caseSensitive": false }
 				},
-				{ "type": "contains", "value": ".sidebar", "message": "Target <kbd>.sidebar</kbd> inside media query", "options": { "caseSensitive": false } },
+				{
+					"type": "contains",
+					"value": ".sidebar",
+					"message": "Target <kbd>.sidebar</kbd> inside media query",
+					"options": { "caseSensitive": false }
+				},
 				{
 					"type": "property_value",
 					"value": { "property": "width", "expected": "250px" },