{#

Element ID: Element11
Element Name: New in drill store

#}

<section class="carousel-blocks-wide">
    <h2 class="text-uppercase h1">{{ element.title }}</h2>
    <div class="container carousel-blocks-wide__wrap">
        <a href="#" class="btn btn--hollow-primary btn__arrow-primary carousel-blocks-wide__previous">
            <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-left"></use></svg>
        </a>

        <div class="owl-carousel owl-theme js-not-clickable" id="js-carousel-blocks-wide">
            {% for drill in element.drills %}
            <div class="carousel-blocks-wide__block">
                <div class="featured">
                    <h3 class="h2">{{ drill.name }}</h3>
                    <img src="{{ drill.thumbnail }}" class="featured-img" />
                </div>
                <div class="carousel-blocks-wide__block-info">
                    <div class="carousel-blocks-wide__gallery">
                        {% for preview in drill.previews %}
                        {% if loop.index > 1 and loop.index < 7 %}
                        <div class="img-wrap">
                            <img src="{{ TimberImage( preview | resize(297)) }}" />
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                    <h4 class="text-bold">DESCRIPTION</h4>
                    <p>{{ drill.description | truncate(55) }}</p>
                    <a href="{{element.set_link}}{{drill.id}}" class="btn btn--hollow small">Learn more about this drill set</a>
                </div>
            </div>
            {% endfor %}

        </div>
        <a href="#" class="btn btn--hollow-primary btn__arrow-primary carousel-blocks-wide__next">
            <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg>
        </a>
    </div>
    <div class="carousel-blocks-wide__link text-align-center">
        <a href="{{ element.button_link }}" class="btn btn--primary">{{ element.button_text }}</a>
    </div>
</section>