{{ if .testimonials }}
<div class="mx-auto lg:px-4 lg:py-12">
  <div class="w-full">
    {{ range $index, $testimonial := .testimonials }}
      <div class="mt-8 testimonial dark:text-white">
        <div class="flex items-start">
          <a href="{{ $testimonial.link }}" 
             class="flex-shrink-0 mr-6 w-24 lg:w-32 object-cover rounded-lg">
             {{ $img := resources.Get $testimonial.avatar }}
             <img src="{{ $img.RelPermalink }}" class="rounded-full object-cover shadow-md" />
          </a>
          <div class="flex-grow flex flex-col justify-between h-full bg-gray-100 dark:bg-darkmode-theme-light p-4 rounded-lg shadow-md">
            <h3 class="text-xl font-bold mb-4">"{{ $testimonial.title }}"</h3>
            <p class="mb-4">{{ $testimonial.content | markdownify }}</p>
            <span class="text-sm">- {{ $testimonial.name | markdownify }}</span>
          </div>
        </div>
      </div>
    {{ end }}
  </div>
</div>
{{ end }}