Bulma: How to define two navbar-breakpoint values for two different navbars?

Question

I am using Bulma and have two Navbars in my React app, one right under another, each in a separate component.

I'd like to define a different $navbar-breakpoint value for each navbar, but cannot identify how to do this. I am using SASS and have some media queries, but even after combing Bulma's docs, I'm not sure what value to change in order to have one navbar breakpoint be one value, and the other be a different one.

This answer for Bootstrap mentions giving the Navbars different IDs and changing CSS values based on screen size, but what properties am I changing for a Bulma Navbar?

Here is my SCSS file, based on this answer for editing the $navbar-breakpoint:

custom-bulma.css:

@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
$navbar-breakpoint: 669px;

@media screen and (max-width: 1024px) {
  //  ???
}

@media screen and (max-width: 669px) {
  //  ???
}

@import "../../node_modules/bulma/bulma.sass";

And, in case it's needed, my React code:

App.js:

const App = () => {
  return (
    <Fragment>
      <NavBar></NavBar>
      <DropdownBar></DropdownBar>
    </Fragment>
  );
};

NavBar.js:

return (
  <nav className="navbar is-fixed-top">
    <div className="navbar-brand">
      <a className="navbar-item" href="#">
        <img src={logo} width="112" height="28" />
      </a>
      <a role="button"
          className={`navbar-burger ${showBurgerMenu? "is-active" : ""}`}
          onClick={showBurgerHandler}
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div className={`navbar-menu ${showBurgerMenu ? "is-active" : ""}`}>
      <div class="navbar-start"></div>
      <div class="navbar-end"></div>
    </div>
  </nav>
);

DropdownBar.js:

return (
  <nav className="navbar">
    <div className="navbar-brand">
      <a
        role="button"
        className={`navbar-burger ${showBurgerMenu ? "is-active" : "" }`}
        onClick={showBurgerHandler}
      >
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div
      className={`navbar-menu ${showBurgerMenu ? "is-active" : "" }`}
    >
      <div className="navbar-start">
        <div className="navbar-item">
          {navbarDropdown}
        </div>
      </div>
      <div className="navbar-end"></div>
    </div>
  </nav>
);