{% macro section(
  title,
  id,
  title_picture,
  title_picture_hover = None,
  title_picture_active = None,
  title_picture_offset = "0px",
  title_color = "var(--color-text)")
-%}
  <div class="section">
    <a class="section--anchor" id="{{id}}"></a>
    <h1
      class="section--title"
      style="
        color: {{ title_color }};
        --picture-url:url('{{ title_picture }}');
        --picture-hover-url:url('{{ title_picture_hover or title_picture }}');
        --picture-active-url:url('{{ title_picture_active or title_picture }}');
        --picture-offset: {{ title_picture_offset }};
      "
    >
      {{ title }}
    </h1>
    {{ caller() }}
  </div>
{%- endmacro -%}
