28 lines
1.2 KiB
Twig
28 lines
1.2 KiB
Twig
{% if speakers is not empty %}
|
|
<section>
|
|
<h2 class="text-3xl font-bold text-center">Speakers</h2>
|
|
|
|
<div class="mt-8">
|
|
<div class="grid grid-cols-2 gap-10 px-4 mx-auto max-w-sm md:grid-cols-3 md:max-w-md lg:grid-cols-4 lg:gap-8 lg:max-w-full xl:grid-cols-6">
|
|
{% for speaker in speakers|sort((a, b) => a.name <=> b.name) %}
|
|
<div>
|
|
<a href="#" class="flex flex-col-reverse gap-3 items-center group">
|
|
<div class="text-center">
|
|
<p class="text-base group-hover:underline">{{ speaker.name }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<img
|
|
alt="Photo of {{ speaker.name }}"
|
|
class="object-cover flex-shrink-0 rounded-full shadow-lg size-20 lg:size-32 xl:size-24"
|
|
src="{{ speaker.imageUrl }}"
|
|
/>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|