{% load wagtailcore_tags wagtailimages_tags %}
{% if not self.fluid %}
<div class="container">
{% endif %}
{% image self.background_image max-1600x1600 format-webp preserve-svg as background_image %}
<div class="hero-bg {% 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 %}>
  <div class="hero-fg" style="{% if self.foreground_color %}color:{{self.foreground_color}};{% endif %}">
    {% for block in self.content %}
    {% include_block block %}
    {% endfor %}
  </div>
</div>
{% if not self.fluid %}
</div>
{% endif %}
