{% if display == 'grid' %}
  {% set col_classes = col_classes ~ ' mb-4' %}

  {% if mobile_slider %}
    {# ── Mobile slider on xs, sm & md only (<992px) ── #}
    <div class="d-block d-lg-none sc-mt">
      {{ attach_library('ui_patterns/scrolling_indicator.scrolling_indicator_lib') }}
      {% set slides = items %}
      <div class="mobile-slider" data-mobile-slider>
        <div class="mobile-slider__track">
          {% for slide in slides %}
            <div class="mobile-slider__slide" data-slide-index="{{ loop.index0 }}">
              {{ slide }}
            </div>
          {% endfor %}
        </div>
        <div class="mobile-slider__dots p-xs">
          {% for slide in slides %}
            <span
                    class="mobile-slider__dot{% if loop.first %} mobile-slider__dot--active{% endif %}"
                    data-dot-index="{{ loop.index0 }}"
            ></span>
          {% endfor %}
        </div>
      </div>
    </div>

    {# ── Desktop grid on lg+ only (≥992px) ── #}
    <div class="d-none d-lg-block sc-mt mb-4">
      {% include "@core/modules/card_block/_card-block-grid.html.twig" %}
    </div>

  {% else %}
    {# Always‑visible grid if mobile_slider is off #}
    {% include "@core/modules/card_block/_card-block-grid.html.twig" %}
  {% endif %}

{% elseif display == 'carousel' %}
  {% include "@core/modules/card_block/_card-block-carousel.html.twig" %}
{% endif %}
