React/TypeScript CSS fix: Center & Responsively Scale a 2:1 Backgammon Board (Replit)

I have a React + TypeScript backgammon app (running on Replit). I need a CSS-only layout fix so the board:

Stays perfectly centered in its parent at all viewport sizes

Always preserves a 2:1 (width:height) ratio

Fills available space on wide screens (use max width)

Caps by available height on short/tall screens so there’s no cropping, overflow, or scrollbars

Keeps current animations smooth (no layout jank); no JS resize handlers

What you’ll deliver

A small CSS/SCSS change (minimal JSX wrapper tweak only if absolutely necessary) that enforces the rules above

A brief note of what changed and why

Acceptance

Desktop, laptop, tablet, mobile: board is centered, 2:1, no cropping/overlap, no new scrollbars

Uses full width on wide screens; caps by height on tall/narrow screens

Animations remain smooth

Context

Tech: React + TypeScript, Framer Motion, Replit