{% load static %}

<div class="h-full w-full bg-petrol-500 flex justify-center items-center relative">
    
  <div class="w-fit space-y-10 pt-10 pb-16 px-4">

    {% for skill in skills %}
    <div class="flex items-center w-fit space-x-4 text-white self-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
          class="w-8 h-8">
          <rect x="1" y="1" width="22" height="22" />
          <path d="M 22.026296,2.1250279 C 9.8847251,11.19086 14.722256,30.081726 7.5560565,11.274574"
            fill="none" stroke-linecap="round" stroke-width="2"/>
      </svg>
      <div>{{ skill.label }}</div>
    </div>
    {% endfor %}

  </div>

  <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-white">./08_KOMPETENZEN</div>

</div>