<div>
  <h3
    class="
      hidden font-alt text-[3.5rem] mb-3
      xl:block
    "
  >Kontakty</h3>
</div>

<div class="flex flex-col gap-2 text-lg">
  <a href="tel:{{ person_telto }}" class="font-bold underline">
    {{ person_telto }}
  </a>
  <a href="{{ person_mail }}" class="font-bold underline">
    {{ person_mail }}
  </a>

  <div class="flex flex-col pt-4 gap-3">
    {% for social_media in social_media_links %}
      <div class="flex items-center gap-2">
        <i class="{{ social_media.icon }}"></i>
        <a href="{{ social_media.url }}" class="underline">
          {{ social_media.name }}
        </a>
      </div>
    {% endfor %}
  </div>
</div>
