{# <div class="col-xs-12 col-sm-3 col-md3 col-lg-3">
    <div class="gami-element">
        <div class="gami-img {% if trainingfin < 100 %} make-grayscale {% endif %}">
            <img src="{{img}}" alt="" width="100" height="100" class="alignnone size-full wp-image-43619" />
        </div>
        {% if percent %}

        <div class="percent-container">
            {% for lektion in lektionen %}
            <li class="percent">"{{lektion.fin}}"</li>
            {% endfor %}
        </div>

        {% else %}

        <div class="bullet-container">
            {% for lektion in lektionen%}
                {% if lektion.fin == 100%}
                <span class="bullet-filled"> </span>
                {% else %}
                <span class="bullet-empty"></span>
                {% endif %}
            {% endfor %}
        </div>
        {% endif %}

    </div>
</div> #}





<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
    <div class="gami-element">
        <div class="gami-img {% if trainingfin < 100 %} make-grayscale {% endif %}">
        <i id="badge-icon" class="fas fa-certificate">
            <img class="badge-pic" src="{{img}}">
            <div class="badge-bar">{{trainingtitle}}</div>
        </i>
        </div>
        <div class="bullet-container">
        {% for lektion in lektionen %}
            {% if lektion.fin == 100 %}
            <span class="bullet-filled"> </span>
            {% else %}
            <span class="bullet-empty"></span>
            {% endif %}
        {% endfor %}
        </div>
    </div><!-- gami ele ende -->
</div>

<style>
    .badge-icon{
    font-size:200px;
    z-index: -999;
    color: #367e91; /*primary-color*/
    }

    .badge-pic{
    width: 150px;
    margin-left: -225px;
    border-radius: 50%;
    border: solid 8px white;
    padding: 7px;
    }

    .badge-pic:before{
    z-index: 999;
    }

    .badge-bar{
    width: 200px;
    background-color: #1a535f; /*secondary-color*/
    color: white;
    margin-top: -45px;
    z-index: 9999;
    position: absolute;
    font-size: 15pt;
    text-align: center;
    border-radius: 10px;
    padding: 5px;
    font-family: Overpass, helvetica, arial, verdana;
    }

    .gami-element{
    position: relative;
    }
  </style>
  