Markup with custom elements, inline styles + CSS variables

nav.html

<nav style="margin: var(--gap-3) 0">
  <navbar-inner>
    <sl-flex nowrap align-items="center" spaced="between">
      <sl-flex-item size="6/10 xs:2/10 sm:3/10 md:4/10 lg:5/10">
        <a href="/" style="background: var(--primary-color)">
          <img alt="Whitefusion" src="/images/whitefusion-w-transparent.png" width="60">
        </a>
      </sl-flex-item>
      <sl-flex-item>
        <a href="/spec">Tech Specs</a>
      </sl-flex-item>
      <sl-flex-item>
        <a href="/resources">Resources</a>
      </sl-flex-item>
      <sl-flex-item>
        <a href="/learn">Learn More</a>
      </sl-flex-item>
    </sl-flex>
  </navbar-inner>
</nav>