{% if hero_banner['Title']['value'] is not empty or hero_banner['Subtitle']['value'] is not empty %}

    <section class="heroBanner">

        <div class="wrapper">

            <div class="heroBanner__inner">

                {% if hero_banner['Title']['value'] is not empty %}
                    <h1 class="heroBanner__title">
                        {{ hero_banner['Title']['value']|raw }}
                    </h1>
                {% endif %}

                {% if hero_banner['Subtitle']['value'] is not empty %}
                    <h2 class="heroBanner__subtitle">
                        {{ hero_banner['Subtitle']['value']|raw }}
                    </h2>
                {% endif %}

            </div> <!-- .heroBanner__inner -->

        </div> <!-- .wrapper -->

    </div> <!-- .heroBanner -->

{% endif %}