{% if page.index_slider.i_bg_image %}
{% assign main_hero_bg = '' %}
  {% capture card_bg %}{% picture open_graph_2000 pages/{{ page.index_slider.i_bg_image}} %}{% endcapture %}
{% endif %}
<section class="restaurant-slider-section py-5 overflow-hidden" style="background-image: url('{{ site.baseurl }}{{ card_bg }}')">
  <div class="custom_container_fluid">
    <div class="d-flex justify-content-between align-items-center mb-5">
      <h2>{{ page.index_slider.headline }}</h2>
      <div class="slider-nav d-flex">
        <button id="prevBtn" class="nav-btn me-2" aria-label="Previous slide">
            {% if page.index_slider.i_left_arrow_btn %}
              {% assign image_alt = page.index_slider.i_left_arrow_btn | remove: '.webp' | remove: '.png' | remove: '.jpg' | remove: '.jpeg' | replace: '-',' ' | replace: '_',' ' %}
              {% picture plus_minus pages/{{ page.index_slider.i_left_arrow_btn }} alt="{{ image_alt }}" class="onboarding-hero_image" loading="lazy" decoding="async" %}
            {% endif %}
        </button>
        <button id="nextBtn" class="nav-btn" aria-label="Next slide">
            {% if page.index_slider.i_right_arrow_btn %}
              {% assign image_alt = page.index_slider.i_right_arrow_btn | remove: '.webp' | remove: '.png' | remove: '.jpg' | remove: '.jpeg' | replace: '-',' ' | replace: '_',' ' %}
              {% picture plus_minus pages/{{ page.index_slider.i_right_arrow_btn }} alt="{{ image_alt }}" class="onboarding-hero_image" loading="lazy" decoding="async" %}
            {% endif %}
        </button>
      </div>
    </div>
    <div class="slider-viewport">
      <div class="slider-track" id="sliderTrack">
        {% for item in page.index_slider.slider_items %}
        <div class="slider-card-item">
          <div class="feature-card h-100 p-4 rounded-4">
            <div class="slider_description">
              <h3>{{ item.title }}</h3>
              <p>{{ item.desc }}</p>
            </div>
            <div class="card-img-wrapper">
            {% if item.image %}
              {% assign image_alt = item.image | remove: '.webp' | remove: '.png' | remove: '.jpg' | remove: '.jpeg' | replace: '-',' ' | replace: '_',' ' %}
              {% if item.p_picture_tag %}
                {% picture {{ item.p_picture_tag }} pages/{{ item.image }} alt="{{ image_alt }}" class="onboarding-hero_image" loading="lazy" decoding="async" %}
              {% else %}
                {% picture width_1260 pages/{{ item.image }} alt="{{ image_alt }}" class="onboarding-hero_image" loading="lazy" decoding="async" %}
              {% endif %}
            {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>