
{{ $title := lower .title }} 
<section id="{{ $title }}" class="section">
  <div class="container content">
    <h1 class="is-uppercase">{{ .title }}</h1>
    <hr class="hr-header" />
    
    {{ $amount := len .data }} 
    {{ range $index, $item := .data }} 
    {{/* Don't place <hr /> if it is the first in the list */}}
    {{ if gt $index 0 }}
    <hr />
    {{ end }}
    <div class="columns is-variable is-8-tablet">
      <div
        class="column is-4-tablet is-one-third-desktop is-one-quarter-widescreen is-full-mobile"
      >
        {{ if eq $title "benefits" }}
        <h2 class="is-uppercase is-size-3 has-text-weight-medium">
          {{ $item.left }}
        </h2>
        {{ else }}
        <h2 class="is-uppercase is-size-4 has-text-weight-medium">
          {{ $item.left }}
        </h2>
        {{ end }}
      </div>
      <div class="column is-two-thirds-desktop is-three-fifths-widescreen is-full-mobile">
        <div class="is-size-4">
          <p class="block has-text-weight-light">
            {{ markdownify $item.right }}
          </p>
        </div>
        {{ if and (eq $amount (add $index 1)) (eq $title "faq") }}
        <button id="faq-button" class="button grey-button is-normal">
          <a href="{{ site.Params.links.docsfaq }}">
            Read all Frequently Asked Questions
          </a>
        </button>
        {{ end }}
      </div>
    </div>
    {{ end }}
  </div>
</section>
