{% load wagtailcore_tags wagtailimages_tags %}

{% if not self.fluid %}
<div class="container">
{% endif %}

{% image self.background_image max-2000x2000 as background_image %}
<div class="hero-bg position-relative {% if self.is_parallax %}parallax{% endif %} {% if self.tile_image %}tile{% endif %} {{self.settings.custom_css_class}}"
    style="{% if self.background_color %}background-color:{{self.background_color}};{% endif %}{% if background_image %}background-image:url({{background_image.url}});{% endif %}"
    {% if self.settings.custom_id %}id="{{self.settings.custom_id}}"{% endif %}>

    {% if self.background_color and background_image %}
        <div class="position-absolute top-0 start-0 w-100 h-100" style="background-color: {{self.background_color}};" aria-hidden="true"></div>
    {% endif %}

    <div class="hero-fg position-relative" style="{% if self.foreground_color %}color:{{self.foreground_color}};{% endif %}">
        {% include_block self.content %}
    </div>
</div>

{% if not self.fluid %}
</div>
{% endif %}