{{- $section1 := .Site.Params.section1 }}
{{- $title    := i18n (index $section1 "title") }}
{{- $subtitle := i18n (index $section1 "subtitle") }}
{{- $tiles    := index $section1 "tiles" }}
<section id="section1_id" class="section section-feature-grey is-medium">
  <div class="container">
    <div class="title-wrapper has-text-centered">
      <h2 class="title is-2">{{ $title }}</h2>
      <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
      <div class="divider is-centered"></div>
    </div>

    <div class="content-wrapper">
      <div class="columns">
        {{- range $tiles }}
        <div class="column is-one-third">
          <div class="feature-card is-bordered has-text-centered revealOnScroll delay-1" data-animation="fadeInLeft">
            <div class="card-title">
              <h4>{{ i18n .title }}</h4>
            </div>
            <div class="card-icon">
                <img src="{{ printf "/images/illustrations/icons/%s.svg" .icon | relURL }}">
            </div>
            <div class="card-text">
                <p>{{ i18n .text }}</p>
            </div>
            <div class="card-action">
              <a href="{{ .url }}" class="button btn-align-md accent-btn raised">{{ i18n .buttonText }}</a>
            </div>
          </div>
        </div>
        {{- end }}
      </div>
    </div>
  </div>
</section>
