<section class="bq19-cards bq19-section  bq19-section--white  ">
    <div class="bq19-cards__content bq19-inner">
        <h2 class="bq19-cards__intro-title"></h2>
        <p class="bq19-cards__intro-subtitle"></p>

        <div class="bq19-cards__list">
                    </div>
    </div>
</section>

<section class="bq19-cards bq19-section {% if text_with_image.background_color %}bq19-section--{{ text_with_image.background_color }} {% else %} bq19-section--white {% endif %} {% if text_with_image.reverse %}bq19-cards--reverse{% endif %}">
    <div class="bq19-cards__content bq19-inner">
        <h2 class="bq19-cards__intro-title">{{cards_listing.title}}</h2>
        <p class="bq19-cards__intro-subtitle">{{cards_listing.subtitle}}</p>

        <div class="bq19-cards__list">
            {% for card in cards_listing.cards %}
                <div class="bq19-cards__item">
                    {% if card.img_src %}
                        <div class="bq19-cards__image-container">
                            <img class="bq19-cards__image" src="{{card.img_src}}" />
                        </div>
                    {% endif %}
                    {% if card.preheading %}
                        <span class="bq19-cards__preheading">{{card.preheading}}</span>
                    {% endif %}
                    {% if card.heading %}
                        <h2 class="bq19-cards__heading">{{card.heading}}</h2>
                    {% endif %}
                    {% if card.text %}
                        <p class="bq19-cards__subheading">{{card.text}}</p>
                    {% endif %}
                    {% if card.button_text %}
                        <a class="button bold" href="{{card.button_href}}">
                        <img src="/images/mainsite5/big-quiz-2019/Download.svg" alt="{{card.text}}" />
                        {{card.button_text}}
                        </a>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </div>
</section>