[REFACTOR] Define Global Breakpoints and CSS Variables

[ledsouza]

Context

We need to establish a standard set of media queries to ensure consistency across the refactor. This involves auditing fixed-width layouts and introducing a fluid system.

Technical Specifications

Proposed Breakpoints:

• Mobile: < 768px
• Tablet: 769px - 1024px
• Desktop: > 1024px

Task List

• Define global CSS variables for breakpoints in the theme provider/SCSS.
• Create utility classes for .hide-on-mobile and .show-on-mobile.
• Replace hardcoded pixel widths (e.g., width: 900px) in the main Layout.js container with max-width and %.

Acceptance Criteria

• npm run build passes without styling errors.
• Resizing the browser triggers the visual changes defined in the new variables.