{% comment %}
  Renders a bg image

  Usage:
  {% render 'section-bg-image' %}
{% endcomment %}

{% assign img_desktop = section.settings.background_image_desktop | image_url %}
{% assign img_mobile = section.settings.background_image_mobile | image_url %}
{% assign video_url = section.settings.background_video_url %}

{% if video_url != blank %}
  <xo-video-cover
    xo-src='{{ video_url }}'
    class='xo-section-bg-image__video'
  ></xo-video-cover>
{% else %}
  <xo-animate
    xo-type='{{ section.settings.background_image_animation }}'
    xo-duration='1000'
    class='xo-section-bg-image'
    style='{% if img_desktop != blank %}--img-desktop: url("{{ img_desktop | image_url: width: 100 }}");{% endif %}{% if img_mobile != blank %}--img-mobile: url("{{ img_mobile | image_url: width: 100 }}");{% endif %}'
  >
    {% if section.settings.use_parallax %}
      <xo-parallax xo-lerp-ease='0.4' class='xo-section-bg-image__item'>
        <xo-parallax-scroll
          xo-keyframes="
            {
              '0%': { backgroundPositionY: '200px' },
              '100%': { backgroundPositionY: '-200px' },
            }
          "
          class='xo-section-bg-image__url xo-background-lazyload'
        >
        </xo-parallax-scroll>
      </xo-parallax>
    {% else %}
      <div class='xo-section-bg-image__item'><div class='xo-section-bg-image__url xo-background-lazyload'></div></div>
    {% endif %}
  </xo-animate>
{% endif %}
