{% extends "/views/base.html" %}

{% set navmarkup %}

{% include "/views/partials/breadcrumb-nav.html" %}

{% endset %}

{% block main %}

{{ navmarkup|safe }}

<div class="container xl">

<div class="title">

<h1>{{_(doc.title)}}</h1>

<p class="subtitle">{{_(doc.subtitle)}}</p>

</div>

<div class="principles">

<div class="principles-col">

{% for principle in doc.principles %}

<div class="principle">

<div class="image">

<amp-img

noloading

width=150

height=150

layout=responsive

src="/static/img/about/design-principles/{{principle.icon}}">

</amp-img>

</div>

<div class="text">

<h3>{{_(principle.title)}}</h3>

<p>{{_(principle.description)|markdown|safe}}</p>

</div>

</div>

{% if loop.index0 == 3 %}

</div>

<div class="principles-col">

{% endif %}

{% endfor %}

</div>

</div>

</div>

{% with cta = doc.cta %}

{% include "/views/partials/footer-cta.html" %}

{% endwith %}

{% include "/views/partials/footer.html" %}

{% endblock %}