<header
  class="
    {% block classes %}
      bg-black flex items-center w-full mb-20 pt-28 pb-8

      xl:pt-48 xl:pb-24

      {% block extra_classes %}{% endblock %}
    {% endblock %}
  "
>
  <div class="flex justify-start w-full">
    <div class="container--wide w-full">
      {% block content %}
        <div class="text-white flex flex-col">
          {% block before_heading %}{% endblock %}

          {% block heading %}
            <h1
              class="
                {% block heading_classes %}
                  mb-1

                  {% if is_short %}head-short{% endif %}

                  {% if description %}
                    head-8xl
                  {% else %}
                    head-14xl
                  {% endif %}
                {% endblock %}
              "
            >
              {{ title|safe }}
            </h1>
          {% endblock %}

          {% block after_heading %}{% endblock %}

          {% block description %}
            {% if description %}
              <p
                class="
                  font-semibold text-lg leading-7 pr-4

                  xl:pr-0

                  lg:max-w-screen-lg

                  {% block description_classes %}{% endblock %}
                "
              >
                {{ description }}
              </p>
            {% endif %}
          {% endblock %}

          {% block after_description %}{% endblock %}
        </div>
      {% endblock %}
    </div>
  </div>
</header>
