{% style %}
  @media screen and (max-width: 768px) {
    .background-media-text--{{ block.id }} {
      background: {{ block.settings.color_border }};
    }
  }
{% endstyle %}
<div
  data-subsection
  data-section-id="{{ block.id }}"
  data-section-type="background-image"
  class="background-media-text background-media-text--{{ block.id }} background-media-text--{{ block.settings.height }} loaded"
  data-aos="background-media-text__animation"
  {% if block.settings.parallax %}data-parallax="true"{% endif %}>

  <div class="background-media-text__container">
    {% if block.settings.parallax %}
      <div class="parallax-container">
        {% if block.settings.image != blank %}
          {% style %}
            .background-media-text--{{ section.id }} .background-media-text__image {
              background-position: {{ block.settings.alignment }};
            }
          {% endstyle %}
          <div
            class="parallax-image background-media-text__image lazyload"
            {% if block.settings.image != blank %}
              data-bgset="{% render 'bgset', image: block.settings.image %}"
              data-sizes="auto"
            {% endif %}></div>
        {% else %}
          {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}
      </div>
    {% else %}
      {% if block.settings.image != blank %}
        {% style %}
          .background-media-text__image--{{ section.id }} {
            object-position: {{ block.settings.alignment }};
            font-family: "object-fit: cover; object-position: {{ block.settings.alignment }};";
          }
        {% endstyle %}

        {%- assign img_url = product.metafields["artist-collection.Ar"]["CollectionImage"] | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        <img
          class="image-fit background-media-text__image background-media-text__image--{{ section.id }} lazyload"
          src=""
          data-src="{{ img_url }}"
          data-aspectratio="{{ product.metafields["artist-collection.Ar"]["CollectionImage"].aspect_ratio }}"
          data-sizes="auto"
          data-parent-fit="cover"
          alt="{{ product.metafields["artist-collection.Ar"]["CollectionImage"].alt | escape }}">
        <noscript>
          <img
            class="image-fit background-media-text__image background-media-text__image--{{ section.id }} lazyloaded"
            src="{{ product.metafields["artist-collection.Ar"]["CollectionImage"] | img_url: '1800x' }}"
            alt="{{ product.metafields["artist-collection.Ar"]["CollectionImage"].alt }}">
        </noscript>
      {% else %}
        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
      {% endif %}
    {% endif %}
  </div>
  {% if block.settings.subtitle != blank or block.settings.title != blank or block.settings.text != blank %}
    <div class="background-media-text__inner">
      <div class="background-media-text__aligner background-media-text--{{ block.settings.layout }}">
        <div class="animation-cropper">
          <div class="animation-contents">
            <div class="background-media-text__text">
              {% if block.settings.subtitle %}
                <p class="h5">{{ block.settings.subtitle }}</p>
              {% endif %}
              {% if block.settings.title != blank %}
                <p class="h3">{{ product.metafields["artist-collection.Ar"]["CollectionName"] | escape }}</p>
              {% endif %}
              {% if block.settings.text != blank %}
                <div class="rte background-media-text__subtext">{{ product.metafields["artist-collection.Ar"]["CollectionDescription"] }}</div>
              {% endif %}
              {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}" class="btn">
                  {{ block.settings.button_label }}
                </a>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}
</div>

<div class="background-media-text__spacer background-media-text--{{ block.settings.height }}"></div>