Add responsive layout enhancements for improved multi-device experience

[meshackyaro]

Overview

This PR implements four responsive layout enhancements to improve the user experience across different device sizes and orientations.

Changes

Issue #184: Large-text Hero Layout

• Added media query for viewports 1200px+ with enhanced typography scaling
• Increases hero h1 to 6rem and lede to 1.2rem for better readability on large displays
• Includes visual regression test at 1400x900 viewport

Issue #180: Navigation Links Anti-wrap

• Prevents navigation links from wrapping awkwardly on small screens
• Uses flexible spacing with improved layout at 600px and below
• Navigation now spans full width with optimized gap spacing
• Includes visual regression test at 480x800 viewport

Issue #182: Tablet Two-Column Module Grid

• Implements compact two-column layout for tablet widths (601px-900px)
• Optimizes module grid space utilization on tablets
• Includes visual regression test at 768x1024 viewport

Issue #183: Landscape Phone Command Form

• Adds condensed command form layout for landscape phone orientation
• Applies to viewports 541px-900px width with max 600px height
• Reduces padding and spacing for compact display
• Includes visual regression test at 800x480 viewport

Testing

• All existing visual regression tests pass with updated baselines
• Four new visual regression tests added for responsive features
• All changes are CSS-only with no JavaScript modifications
• Keyboard accessibility maintained across all breakpoints

Documentation

• README.md updated with responsive features section
• Visual test coverage for all responsive breakpoints

Closes #180, Closes #182, Closes #183, Closes #184

[drips-wave]

@meshackyaro Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits