{% extends "base.html" %}

{%- block content %}


    <section class="hero-sub" style="background-image: url({{ page.extra.hero_image | safe }})">
        <div class="container hero-sub__container">
            <nav class="bred-crum">
                <ul class="bred-crum__row">
                    <li class="bred-crum__item">
                        <a class="nav-bred bred-crum__link" href="/">{{ page.extra.menu_title_pre }}</a>
                    </li>
                    <li class="bred-crum__item">
                        <span class="nav-bred">
                            >
                        </span>
                    </li>
                    <li class="bred-crum__item">
                        <a class="nav-bred bred-crum__link bred-crum--active"
                           href="/{{ page.extra.hero_title | lower }}">{{ page.extra.hero_title }}</a>
                    </li>
                </ul>
            </nav>
            <div class="hero-sub__content">
                <h1 class="h1 hero-sub__title">
                    {{ page.extra.hero_title | safe }}
                </h1>
                <p class="h2-sub_v2 hero-sub__description">
                    {{ page.extra.hero_description }}
                </p>

            </div>
        </div>
    </section>

    <section class="section-support">
        <div class="container section-support__container">
            <div class="section-support__item">
                <div class="section-support__content">
                    <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_1 | safe }}</h2>
                    <div class="section-support__line"></div>
                    <p class="p-sm  section-support__description">{{ page.extra.support_card_description_1 | safe }}</p>
                </div>
                <img class="section-support__img" src="/images/support/email-card-banner.png" alt="img">
            </div>
            <div class="section-support__item">
                <div class="section-support__content">
                    <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_2 | safe }}</h2>
                    <div class="section-support__line"></div>
                    <p class="p-sm  section-support__description">{{ page.extra.support_card_description_2 | safe }}</p>
                </div>
                <img class="section-support__img" src="/images/support/faq-card-banner.png" alt="img">
            </div>
            <div class="section-support__item">
                <div class="section-support__content">
                    <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_3 | safe }}</h2>
                    <div class="section-support__line"></div>
                    <p class="p-sm  section-support__description">{{ page.extra.support_card_description_3 | safe }}</p>
                </div>
                <img class="section-support__img" src="/images/support/support-channel-banner.png" alt="img">
            </div>
        </div>

    </section>
    {% include 'section/donate.html' %}


{%- endblock content %}