{#

Element ID: Element03
Element Name: Tutorial slider

#}


<section class="carousel-blocks">
    <h2 class="text-uppercase h1">Video tutorials</h2>
    <div class="container">
        <div class="carousel-blocks__wrap">
            <a href="#" class="btn btn--hollow-primary btn__arrow-primary carousel-blocks__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">

              {% for tut in element.tutorial_posts %}
              <div class="carousel-blocks__block">
                <a href="{{ tut.link }}">
                <div class="youtube-embed img-play-button">
                    <img src="{{ function("get_youtube_thumb", tut.youtube_link) }}" alt="">
                    <div class="play-icon">
                        <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#play-icon"></use></svg>
                    </div>
                </div>
                <div class="carousel-blocks__block-info">
                    <h4 class="text-bold">{{ tut.title }}</h4>
                    {{ tut.content }}
                </div>
              </a>
              </div>
              {% endfor %}
            </div>
            <a href="#" class="btn btn--hollow-primary btn__arrow-primary carousel-blocks__next">
                <svg class="arrow-left"><use href="{{ site.theme.link }}/frontend/img/icons.svg#arrow-right"></use></svg>
            </a>
        </div>
    </div>
</section>