Strategies for handling different breakpoints for a component?

What strategies have folks found useful in managing breakpoints for a component? There’s a few factors that I think can make this tricky:

  • The size of the component (as in, “atoms”, “molecules”, “organisms” etc. … a checkbox component is much less likely to need to worry about breakpoint, whereas a global navigation component would)
  • The complexity of its composition (how much stuff is inside it)
  • The nature of the product (is it a web app, a marketing site, a etc)

I also think about all the different options we have at our disposal, natively in Figma:

  • Variants
  • Separate components (using slash-naming, frames, and pages to create folders or groups of components that related)
  • Multiple libraries (e.g. having a mobile library VS a desktop library)

This is just an off-the-top-of-my-head list—what other factors do you consider when you’re deciding how to approach different breakpoints for a component? And do you sometimes use different approaches, or do you commit to one and stick with it (e.g. always using variants to manage breakpoint)?