{% 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 callout-icon">

{% if callout.icon_brand %}

<i class="fab {{ callout.icon }} fa-4x"></i>

{% else %}

<i class="fas {{ callout.icon }} fa-4x"></i>

{% endif %}

</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 | relative_url }}" class="button is-primary">

{{ callout.call_to_action_name }}

</a>

{% endif %}

</div>

{% endfor %}

</div>

</div>

</div>

</section>

{% endif %}