{% if recommended_articles is not empty %}
    

    {% set blogGridSliderOptions = "{
            destroy: false,
            pagination: false,
            rewind: false,
            arrows: true,
            speed: 1500,
            perMove: 1,
            perPage: 3,
            breakpoints: {
              
            }
    }"
    %}
    
    <div class="recommendedArticlesWrap {{ class }}">

        <div class="wrapper">

            <div class="recommendedArticles">


                {% if intro_title is empty %}
                    {% set intro_title = 'You may also like' %}
                {% endif %}

                {% if intro_content is empty %}
                    {% set intro_content = 'Check out similar articles' %}
                {% endif %}


                {% include 'includes/elements/intro_block.twig' with {
                    intro_title: intro_title,
                    intro_content: intro_content,
                    class: ''
                }%}


                <mtc-slider
                        class="blogGrid mobileGridSlider"
                        :options="{{ blogGridSliderOptions }}"
                >


                    {% for recommended_article in recommended_articles %}
                        
                        <mtc-slide class="blogGrid__item">

                            {% include '/includes/partials/blog_article_card.twig' with{
                                article: recommended_article,
                                image_after: true,
                                hide_summary: true
                            }%}
                            
                            
                        </mtc-slide>
                        
                    {% endfor %}
                    
                </mtc-slider>
                

            </div> <!-- .recommendedArticles -->

        </div> <!-- .wrapper -->

    </div> <!-- .recommendedArticlesWrap -->

{% endif %}
