{% extends "base.html" %}
{% block content %}
<section class="pagehead">
  <div class="container">
    <div class="breadcrumb"><a href="/">Home</a> / Terms Center</div>
    <div class="eyebrow">Terms Center</div>
    <h1>Terms &amp; Conditions for every application</h1>
    <p>Each app has its own Terms &amp; Conditions covering license scope, user responsibilities, intellectual property, and liability.</p>
  </div>
</section>

<section class="section--tight">
  <div class="container">
    <div class="grid grid-2" data-stagger>
      {% for app in apps %}
      <a href="/apps/{{ app.slug }}/terms-and-conditions/" class="card reveal flex between center">
        <div class="flex gap-16 center">
          <div class="app-icon sm" style="background: linear-gradient(135deg, {{ app.gradient[0] }}, {{ app.gradient[1] }});">{{ app.icon_letters }}</div>
          <div>
            <h3 style="font-size:15.5px; margin-bottom:2px;">{{ app.full_name }}</h3>
            <span class="small muted">Terms &amp; Conditions →</span>
          </div>
        </div>
      </a>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}