fix(homepage): adjust responsive breakpoints to prevent skill card clipping

Changed layout breakpoints from md (768px) to xl (1280px) to ensure:
- Skills section doesn't get clipped at medium viewport sizes
- Layout only switches to side-by-side when there's sufficient space
- Container min-width is responsive (100% below xl, 1400px at xl+)

This prevents the issue where content was overflowing at intermediate
viewport widths.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/page.tsx

@@ -149,24 +149,24 @@ export default function HomePage() {
                 border: '1px solid',
                 borderColor: 'gray.700',
                 shadow: 'lg',
-                minW: '1400px',
+                minW: { base: '100%', xl: '1400px' },
                 mx: 'auto',
               })}
             >
               <div
                 className={css({
                   display: 'flex',
-                  flexDirection: { base: 'column', md: 'row' },
+                  flexDirection: { base: 'column', xl: 'row' },
                   gap: '8',
-                  alignItems: { base: 'center', md: 'flex-start' },
+                  alignItems: { base: 'center', xl: 'flex-start' },
                 })}
               >
                 {/* Tutorial on the left */}
                 <div
                   className={css({
                     flex: '1',
-                    minW: { base: '100%', md: '500px' },
+                    minW: { base: '100%', xl: '500px' },
-                    maxW: { base: '100%', md: '500px' },
+                    maxW: { base: '100%', xl: '500px' },
                   })}
                 >
                   <TutorialPlayer