<section class="range-card">
    <h3 class="range-card__title">{{title}}</h3>

    <p class="range-card__intro">
        {{intro}}
        <a href="{{range-link}}" class="range-card__more-link">Learn more</a>
    </p>
    <div class="range-card__group">
        {{#if tag.text}}
            <div class="range-card__tag {{tag.type}}" style="z-index:99;">{{tag.text}}</div>
        {{/if}}

        <div class="range-card__slider-holder">
            {{#if slider.slides.length}}
                {{> gallery slider modification="gallery_range" slidesCount="9" }}
            {{else}}
                <img src="{{slider.image}}" alt="{{title}}" class="mw-100 mb-4">
            {{/if}}
        </div>
        <div class="range-card__data-holder">
            {{#if show-sale-tag}}
                <div class="range-card__badges">
                    <div class="range-card__badge">Sale now on</div>
                </div>
            {{/if}}
            {{#if sale}}
                <div class="range-card__badges">
                    <div class="range-card__badge">{{sale}}</div>
                </div>
            {{/if}}
            <div class="range-card__data-block range-card__data-block_order-1">
                <span class="range-card__data-block-lbl heading-6">Price from:</span>
                <span class="range-card__price" style="color: #cf000f;">{{price}}</span>
                <div class="range-card__price-info">
                    <span class="icon range-card__price-info-icon">
                        <i class="fas fa-info-circle"></i>
                    </span>
                    {{#each info}}
                        <div>{{.}}</div>
                    {{/each}}
                </div>
            </div>
            <div class="range-card__data-block range-card__data-block_order-3">
                <ul class="range-card__promo list">
                    {{#each promo}}
                        <li>{{{.}}}</li>
                    {{/each}}
                </ul>
            </div>
            <div class="range-card__data-block range-card__data-block_order-4">
                <div class="range-card__action-holder">

                    <a href="{{range-link}}" class="range-card__btn-view btn btn-primary btn_full" tag-class="cta-kitchen-{{@index}}">
                        <span class="btn__text">{{range-link-text}}</span>
                    </a>

                </div>
                <div class="range-card__action-holder">
                    <a href="./designconsultant" class="range-card__btn-view btn btn-secondary btn_full" tag-class="cta-kitchen-book-dc-{{@index}}">Book a FREE Design Appointment</a>
                </div>
            </div>
            <div class="range-card__data-block range-card__data-block_order-2">

                {{#if color-amount.length}}
                    <span class="range-card__data-block-lbl heading-6">Available in {{color-amount}} colours:</span>

                {{else}}
                    <span class="range-card__data-block-lbl heading-6">Available in 1 colour:</span>
                {{/if}}
                {{>card-color-slider slidesCount="3" width="240"}}
            </div>
        </div>
    </div>
</section>