<header role="banner" class="columns small-12">
    <section id="header-top" class="row align-middle">
      <div id="header-top-left" class="columns medium-4 small-4">
        {{ page.header_top_left }}
      </div>
      <div id="header-top-middle" class="columns medium-7 small-6">
        {{ page.header_top_middle }}
      </div>
      <div id="header-top-right" class="columns small-1">
        {{ page.header_top_right }}
      </div>
    </section>
    <section id="header-bottom">
      {{ page.header_bottom }}
    </section>
  </header>