{% if include.header or include.title or include.description or include.background %}
<header class="container-fluid bg-dark text-white shadow text-center align-items-center p-0"
        {% if include.header.background or include.background %}
        style="
          min-height: 5vh;
          background-image: url('{{ include.header.background | default: include.background }}');
          background-attachment: fixed;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;"
        {% else %}
        style="min-height: 5vh;"
        {% endif %}
>
    <div
            {% if include.header.background or include.background %}
            style="background-color:rgba(0, 0, 0, 0.5);"
            class="w-100 p-3 m-auto text-center"
            {% else %}
            class="bg-dark p-3 m-auto text-center"
            {% endif %}
    >
        <h1 class=""> {{ include.header.title | default: include.title }}</h1>
        {% if include.header.description or include.description %}
        <p class="mt-3">{{include.header.description | default: include.description }}</p>
        {% endif %}
    </div>
</header>
{% endif %}