<div class="grid grid-services_callouts">
    <div class="container">
        <div class="row">

            {% for callout in grid.services_callouts %}
                <div class="col-lg-4 reveal">
                    <div class="callout">

                        <div class="top">
                            {{ callout.image.cropped.resize(400)|raw }}
                        </div>

                        <div class="cap">
                            {{ img(template.theme.cap_right ?: 'qcr.theme.qcr::img/about-cap-right.png')|raw }}
                        </div>

                        <div class="icon">
                            {% if callout.icon.key %}
                                {{ img('qcr.theme.qcr::img/' ~ callout.icon.key).inline|raw }}
                            {% endif %}
                        </div>

                        <h3>
                            {% if callout.url.value %}
                                <a href="{{ callout.url.normalize }}">
                                    {{ callout.title }}
                                </a>
                            {% else %}
                                {{ callout.title }}
                            {% endif %}
                        </h3>

                        {{ callout.copy.render|raw }}

                    </div>
                </div>
            {% endfor %}

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