{#

Element ID: Element07
Element Name: Call to action

#}


<section id="{{ element.html_id  }}" class="get-started get-started--homepage">
    <div class="get-started__img-wrap">
        <picture>
            <source srcset="{{ TimberImage(element.background_image).src }}" media="(min-width: 620px)">
            <img class="" src="{{ TimberImage(element.background_image_mobile).src }}" alt="Linde firefighting VR" />
        </picture>
    </div>

    <div class="get-started__articles">
        <h1 class="get-started__articles-heading">Articles</h1>

        <div class="container">
            <div class="get-started__slider-wrapper">
                <div class="slider-arrows__left articles-slider-left">
                    <svg class="icon-arrow-left">
                        <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-arrow-left"></use>
                    </svg>
                </div>
                <div class="container">
                    <div class="homepage-articles-slider owl-carousel owl-drag owl-refresh get-started__articles-slider">
                        {% for post in element.posts %}
                        <div class="get-started__articles-tile">
                            <div class="w-100">
                                <div class="row no-gutters h-100">
                                    <div class="col-md-5">
                                        <a href="{{post.link}}">
                                            <img class="get-started__articles-image" src="{{ post.thumbnail.src }}"  alt="{{ post.thumbnail.alt }}"/>
                                        </a>
                                    </div>
                                    <div class="col-md-7">
                                        <div class="get-started__articles-tile-about">
                                            <h6 class="get-started__articles-date">{{ post.date }}</h6>
                                            <h4 class="get-started__articles-title">{{ post.title }}</h4>
                                            <a class="get-started__articles-link btn btn--gradient" href="{{ post.link }}">Read Article</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="slider-arrows__right articles-slider-right">
                    <svg class="icon-arrow-right">
                        <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-arrow-right"></use>
                    </svg>
                </div>
            </div>
        </div>

        <a href="{{ element.articles_page_link }}" class="btn btn--hollow text-dark">
            <span>Go to Articles</span>
        </a>
    </div>

    <div class="get-started__block" data-aos="fade-up">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="get-started__content">
                        <p class="h3">{{ element.description }}</p>
                        <a class="btn btn--dark modal-form-trigger" onClick="gtag('event', 'form_open', {'event_category' : 'Get Started click', 'event_label' : 'Get started now - Homepage bottom' });">{{ element.button_title }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>