<div class="bg-lime-300 pb-16 relative">
  <div class="grid pt-10 px-10 max-h-[646px] overflow-y-auto">
    <div class="self-center">
    {% for education in educations %}
      <h2 class="font-bold text-base text-center">
        {{ education.title }}
      </h2>
      <div class="text-sm text-center">{{ education.subtitle }}</div>
      <div class="text-sm text-center">{{ education.time }}</div>
      {% if education.thesis %}
      <div class="text-sm text-slate-600 flex space-x-1">
        <div class="font-bold">Thesis:</div>
        <div class="">
          {{ education.thesis }}
        </div>
      </div>
      {% endif %}
  
      {% if educations|length != education.lfd %}
      <div class="py-10 text-petrol-500">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="mx-auto w-6 h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
        </svg>
      </div>
      {% endif %}
    {% endfor %}
    </div>
  </div>
  <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-slate-800">./06_AUSBILDUNG</div>
</div>