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