{% extends 'FrontofficeFr/base.html.twig' %}
{% block activePresentation %}main-menu-active{% endblock %}
{% block titre %}Nos partenaire{% 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;
  /*background-color:#f1f1f1;*/
  min-height:200px
}

.square-holder img {
  max-width:100%;
  filter: grayscale(100%);
  transition: all 0.3s;
}

.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;">Nos partenaire</h3>
        </div>
    </div>
    <div class="row block_ac" style='width:100%;margin:0%'>
        <section class="section section-default mt-none mb-none">
            <div class="container">
                <strong>
                <div class="row">
                    {% for p in partenaires %}
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <a href="{{p.site}}" alt="{{ p.titre }}" class="parte" target="_black">
                                <div class="square-holder" style="display: block;">
                                    <img alt="" src="{{p.logo}}" />
                                    <h3>{{ p.titre }}</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 %}