Preserve image aspect ratio with Gatsby image component within Flexbox

export default function Header() {
  return (
    <header>
      <StaticImage
        src="../images/logo-stile.svg"
        alt="Green stile text logo"
        width={63}
        height={24}
      />
      <nav>
        <ul>
          <li>
            <Link to="/what-is-stile">What is Stile?</Link>
          </li>
          <li>
            <Link to="/why-choose-stile">Why choose Stile?</Link>
          </li>
          <li>
            <Link to="/professional-learning">Professional Learning</Link>
          </li>
          <li>
            <Link to="/who-we-are" className="who-we-are">
              Who we are
            </Link>
          </li>
        </ul>
        <ul>
          <li>
            <Link to="sign-up">Set up a trial</Link>
          </li>
          <li>
            <Link to="/login">Log in</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

export default function Header() {
  return (
    <header>
      <StaticImage
        src="../images/logo-stile.svg"
        alt="Green stile text logo"
        width={63}
        height={24}
      />
      <nav>
        <ul>
          <li>
            <Link to="/what-is-stile">What is Stile?</Link>
          </li>
          <li>
            <Link to="/why-choose-stile">Why choose Stile?</Link>
          </li>
          <li>
            <Link to="/professional-learning">Professional Learning</Link>
          </li>
          <li>
            <Link to="/who-we-are" className="who-we-are">
              Who we are
            </Link>
          </li>
        </ul>
        <ul>
          <li>
            <Link to="sign-up">Set up a trial</Link>
          </li>
          <li>
            <Link to="/login">Log in</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}