<div class="image-carousel">
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell medium-10 medium-offset-1">
                <div class="carousel carousel--image" data-module="imagecarousel">
                    {{#if title}}<h2 class="carousel__title cell">{{{title}}}</h2>{{/if}}
                    <div class="carousel__track">
                        <div class="carousel__bounds"></div>
                        <div class="carousel__draggable"></div>
                    </div>
                    <div class="carousel__slider grid-x grid-margin-x">
                        <div class="carousel__slider">
                            {{#each responsiveImages}}
                            <div class="carousel__slide js-carousel-slide cell medium-6" data-dominant-colour="{{this.dominantColour}}">
                                {{> @cp-medium-image}}
                                {{#if caption}}
                                <div class="image-carousel__caption">
                                    {{#if caption.location}}
                                        <div class="image-carousel__location-container">
                                            <span class="image-carousel__location-icon"></span>
                                            <p class="image-carousel__location">{{caption.location}}</p>
                                        </div>
                                    {{/if}}
                                    {{#if caption.description}}<p class="image-carousel__description">{{caption.description}}</p>{{/if}}
                                </div>
                                {{/if}}
                            </div>
                            {{/each}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>