<section id="mission" class="mission">
    <div class="section-container">
        <h2>{{ t.mission.section_title }} <span class="accent-text">{{ t.mission.section_title_accent }}</span></h2>
        <p class="mission-text">
            {{ t.mission.paragraph_main }}
        </p>
        <p class="mission-text mission-text--secondary">
            {{ t.mission.paragraph_secondary }}
        </p>

        <div class="values-grid">
            {% for value in t.values %}
            <div class="value-card">
                <div class="value-icon">{{ value.icon }}</div>
                <h3>{{ value.title }}</h3>
                <p>{{ value.description }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
