<section id="case_studies" class="section">
  <div class="container content">
    <h1 class="is-uppercase">Who’s  already using co-op cloud?</h1>

    <div id="case_studies-slide-body">
    {{ range $index, $item := .data | shuffle }}
    {{ if ne $index 0 }}
    <div class="columns is-centered is-gapless">
      <div class="column is-8">
        <hr class="divider">
      </div>
    </div>
    {{ end }}
    <div class="columns my-6 is-vcentered">
      {{ if eq (mod $index 2) 0 }}
      <div class="column is-one-quarter is-offset-1">
        <div class="image thumbnail mx-4">
          {{ with $item.thumbnail }}
          <img src="{{ $item.thumbnail }}" class="is-rounded">
          {{ else }}
          <img src="/img/wired.jpg" class="is-rounded">
          {{ end }}
        </div>
      </div>
      <div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
        <h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
        <p>{{ $item.content | markdownify }}</p>
      </div>
      {{ else }}
      <div class="column is-size-5 is-offset-1 is-widescreen is-full-tablet is-half">
        <h2 class="is-uppercase is-size-4 has-text-weight-medium">{{ $item.title | markdownify }}</h2>
        <p>{{ $item.content | markdownify }}</p>
      </div>
      <div class="column is-one-quarter is-offset-1">
        <div class="image thumbnail mx-4">
          {{ with $item.thumbnail }}
          <img src="{{ $item.thumbnail }}" class="is-rounded">
          {{ else }}
          <img src="/img/wired.jpg" class="is-rounded">
          {{ end }}
        </div>
      </div>
      {{ end }}
    </div>
    {{ end }}
    </div>
    <div id="case_studies-slide-more" class="button is-medium is-rounded">Expand</div>
  </div>
  <script defer language="javascript" type="text/javascript"  src="{{ "/js/expandable.js" | urlize | relURL }}"></script>
</section>