{% 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 %}

<div
  class='xo-section-bg-image {% if section.settings.width1 == 'unset' %} xo-container-width{% endif %} {% if section.settings.width1 == 'wide' %} xo-container-wide{% endif %} {% if section.settings.width1 == 'box' %} xo-container-box{% endif %}'
  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 %}
</div>
