<div class=“container”>

<div class="row">
  <div class="col hero-slider__slider">
  {% for slide in page.slides %}
    {% if forloop.first == true %}
    <div>
      <a href="{{ slide.url }}"><img src="{{page.baseurl}}{{slide.image}}" class="img-fluid hero-slider__slider--slide-img" alt="{{slide.alt-text}}" /></a>
      <div class="hero-slider__slider--heading-container hero-slider__slider--heading-container--width hero-slider__slides-{{ forloop.length }} text-center">
        <h3 class="hero-slider__heading--bold">{{slide.text}}</h3>
      </div>
    </div>
    {% else %}
    <div>
      <a href="{{ slide.url }}"><img src="{{ page.baseurl }}assets/img/kcc-placeholder.png" data-src="{{page.baseurl}}{{slide.image}}" class="img-fluid hero-slider__slider--slide-img" alt="{{slide.alt-text}}" /></a>
      <div class="hero-slider__slider--heading-container hero-slider__slider--heading-container--width hero-slider__slides-{{ forloop.length }} text-center">
        <h3 class="hero-slider__heading--bold">{{slide.text}}</h3>
      </div>
    </div>
    {% endif %}
  {% endfor %}
  </div>
</div>

</div>