<div class="bg-white py-6 sm:py-8 lg:py-12">
  <div class="mx-auto max-w-screen-md px-4 md:px-8">
    <h1 class="mb-4 text-center text-2xl font-bold text-gray-800 sm:text-3xl md:mb-6">{{ content1_title }}</h1>

    <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">
      {{ content1_text }}
    </p>


    <h2 class="mb-2 text-xl font-semibold text-gray-800 sm:text-2xl md:mb-4">{{ content1_subtitle }}</h2>

    <p class="mb-6 text-gray-500 sm:text-lg md:mb-8">{{ content1_title2 }}</p>

    <ul class="mb-6 list-inside list-disc text-gray-500 sm:text-lg md:mb-8">
      <li>{{ content1_item1 }}</li>
      <li>{{ content1_item2 }}</li>
      <li>{{ content1_item3 }}</li>
    </ul>

    <blockquote class="mb-6 border-l-4 pl-4 italic text-gray-500 sm:text-lg md:mb-8 md:pl-6">{{ quate_title }}</blockquote>

    <div class="relative mb-6 overflow-hidden rounded-lg bg-gray-100 shadow-lg md:mb-8">
      <img src="{{ content1_photo }}" loading="lazy" alt="Photo by Minh Pham" class="h-full w-full object-cover object-center" />
    </div>

    
  </div>
</div>