{% extends 'FrontofficeAr/base.html.twig' %}
{% block activePresentation %}main-menu-active{% endblock %}
{% block titre %} روابط مفيدة
{% endblock %}
{% block body %}

<style>


.square-holder {
  padding:15px;
  border: 1px solid #cecece;
  align-items: center;
  display:flex;
  align-items: center;
  justify-content: center;
  margin-bottom:20px;
    min-height: 220px;
    height: 220px !important;
}

.square-holder img {
  max-width:110px;
  width:110px;
  height:110px;
  filter: grayscale(100%);
  transition: all 0.3s;
  margin-top: 10px;
}

.square-holder:hover img{
  filter:none;
}
    
    
.square-holder h3{
    font-family: tajawal !important;
    font-size: 15px;
    color: gray;
}
.parte:hover h3{
    color:#3c70b3;
}
</style>

    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">روابط مفيدة </h3>
        </div>
    </div>
    <div class="row block_ac" style='width:100%;margin:0%'>
        <section class="section section-default mt-none mb-none">
            <div class="container1">
                <strong>
                <div class="row">
                    {% for p in liensutiles %}
                        <div class="col-sm-6 col-md-3 col-lg-3">
                            <a href="{{p.chemin}}" alt="{{ p.titreAr }}" class="parte" target="_black" style="text-align: -webkit-center;">
                                <div class="square-holder"  style="display: block !important;">
                                    <img alt="" src="{{p.image}}" />
                                    <h3>{{ p.titreAr }}</h3>
                                </div>
                            </a>
                        </div>
                    {% endfor %}
                </div>
                </strong>
            </div>
        </section>
    </div>
{% endblock %}

{% block js %}
    <script src="{{ asset("assets/FrontofficeFr/assets/vendor/purecounter/purecounter_vanilla.js") }}"></script>
    <script>
        new PureCounter();
    </script>
{% endblock %}