{%
set classes = [
  'bs-hero',
  hero_id,
  'full-width',
  bgcolor,
  opacity,
  image_pos == 'side_image' ? 'side-image row',
  image_pos == 'background_image' ? 'bg-image p-5 text-light',
  'my-auto',
  'd-flex',
  'align-items-center',
]
%}

{% set flex_dir = flex-direction ? 'flex-row' : 'flex-column' %}

  <style>
    .{{ hero_id }} {
      --hero-background: url("{{ bgimage }}");
      --hero-height: {{height}};
      {% if hero_id|render|trim starts with 'bs-hero-paragraph' %}
        {% if image_pos == 'background_image' %}
        background-image: linear-gradient(
          to bottom,
        rgba(0, 0, 0, 0.7) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.7) 100%
          ),
        var(--hero-background); 
      {% endif %}
        background: {{ bgcolor }};
      {% endif %}
    }
</style>

<div{{attributes.addClass(classes)}}>
	{% if container %}
		<div class="container {{ image_pos == 'side_image' ? 'd-flex row' }}">
	{% endif %}

  {% if image_pos == 'side_image' %}
    <div class="bs-hero__side-image col-lg-4 align-self-stretch">
    </div>
  {% endif %}
  <div class="bs-hero__content {{ flex_dir }} {{ image_pos == 'side_image' ? 'col-lg-8' }}">
    {{ content }}
  </div>

  {% if container %}
		</div>
	{% endif %}
</div>