{% if page.callouts %}

{% assign callouts=site.data.[page.callouts] %}
<section class="hero {% if callouts.height %} {{ callouts.height }} {% else %} is-medium {% endif %} {{ callouts.style }}">
    <div class="hero-body">
        <div class="container">
            <div class="columns is-multiline is-centered">
                {% for callout in callouts.items %}
                    <div class="column is-4 has-text-centered">
                        {% if callout.icon %}
                        <div class="icon is-large">
                            <i class="fas {{ callout.icon }} fa-4x"></i>
                        </div>
                        {% endif %}
                        <p class="title is-5">{{ callout.title }}</p>
                        <p class="subtitle is-5">{{ callout.subtitle }}</p>

                        {% if callout.description %}
                        <div class="content">
                            <p>{{ callout.description | newline_to_br }}</p>
                        </div>
                        {% endif %}

                        {% if callout.call_to_action_name %}
                        <a href="{{ callout.call_to_action_link | prepend: site.baseurl }}" class="button is-primary">
                            {{ callout.call_to_action_name }}
                        </a>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

{% endif %}