Build a responsive UI component that demonstrates a horizontal collection of interactive buttons representing different scale variants. 

**Layout Structure:**
The component should feature a single-row container using flexbox properties to align multiple button elements horizontally. Ensure there is consistent spacing between each element using a gap utility. The container should be centered within its parent wrapper.

**Visual Style:**
Adopt a clean, modern aesthetic with a focus on hierarchy through size. Use a professional, sans-serif typography feel. The buttons should follow a cohesive design system—each size variant should clearly distinguish itself through padding, font size, and border-radius increments. Apply a subtle hover state to each button that slightly shifts the background opacity or color to provide immediate tactile feedback to the user.

**Interactions & Responsiveness:**
The buttons should be fully clickable and trigger standard button states (active, hover, focus). The component must be responsive; on mobile viewports, consider stacking the buttons vertically or ensuring the gap adjusts to prevent overflow.

**Content Requirements:**
Include three distinct button variations labeled to represent their functional size (e.g., Small, Medium, and Large). The primary purpose is to showcase how a design system handles scale in a UI library. Ensure the code is modular and uses a consistent base component architecture, allowing for easy updates to the underlying styling of all variants simultaneously. Use a neutral color palette that can be easily customized to fit a brand's specific design language.