<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-6 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-8 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-10 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-12 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-14 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
</div>

<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-6 rounded-md bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-8 rounded-md bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-10 rounded-lg bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-12 rounded-xl bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
  <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-14 rounded-xl bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
</div>

<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <div class="relative inline-block">
    <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-6 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
    <span class="absolute bottom-0 right-0 block size-1.5 rounded-full bg-gray-300 ring-2 ring-white dark:bg-gray-500 dark:ring-gray-900"></span>
  </div>
  <div class="relative inline-block">
    <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-8 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
    <span class="absolute bottom-0 right-0 block size-2 rounded-full bg-red-400 ring-2 ring-white dark:bg-red-500 dark:ring-gray-900"></span>
  </div>
  <div class="relative inline-block">
    <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-10 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
    <span class="absolute bottom-0 right-0 block size-2.5 rounded-full bg-green-400 ring-2 ring-white dark:bg-green-500 dark:ring-gray-900"></span>
  </div>
  <div class="relative inline-block">
    <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-12 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
    <span class="absolute bottom-0 right-0 block size-3 rounded-full bg-gray-300 ring-2 ring-white dark:bg-gray-500 dark:ring-gray-900"></span>
  </div>
  <div class="relative inline-block">
    <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-14 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
    <span class="absolute bottom-0 right-0 block size-3.5 rounded-full bg-red-400 ring-2 ring-white dark:bg-red-500 dark:ring-gray-900"></span>
  </div>
  <div class="relative inline-block">
    <img src="https://fuchs.portal.azf-gruppe.de/mitarbeiterbilder/lusom.jpg" loading="lazy" alt="Lukas Sommerfeld" class="size-16 rounded-full bg-gray-50 outline outline-1 -outline-offset-1 outline-black/5 dark:bg-gray-900">
    <span class="absolute bottom-0 right-0 block size-4 rounded-full bg-green-400 ring-2 ring-white dark:bg-green-500 dark:ring-gray-900"></span>
  </div>
</div>