<section

class="heroBanner {% if page._header == 'transparent' %}heroBanner--transparentHeader{% endif %}
{% if include.collection %} heroBanner--imageBackground{% endif %}
{% if include.noBackground %} heroBanner--noBackground{% endif %}"
{% if include.collection %} style="background-image: url('{{ include.collection.image }}');"{% endif %}>

{{ include.injectedContent }}

<div class="heroBanner__wrapper">

  <div class="heroBanner__content">
  {% if include.collection %}
    {% include modules/heroCollection.html
      collection = include.collection
      title = include.title
      description = include.description
    %}
  {% else %}
    <h1 class="heroBanner__title">{{ include.title }}</h1>
    <p class="heroBanner__description">{{ include.description }}</p>
  {% endif %}
  </div>

  {% if include.search %}
    {% include modules/heroSearch.html %}
  {% endif %}

</div>

</section>