<section id="about" class="h-screen w-full bg-gray-50 flex items-center">
  <div class="max-w-4xl mx-auto px-4">
    <div class="grid lg:grid-cols-2 gap-16 items-center">
      <div data-aos="fade-right">
        <h2 class="text-4xl font-light text-gray-900 mb-6">
          {{ sections.about.title }}
        </h2>
        <p class="text-lg text-gray-600 leading-relaxed">
          {{ sections.about.content }}
        </p>
      </div>
      
      {% if sections.about.media %}
      <div data-aos="fade-left">
        <img src="{{ sections.about.media.src }}" 
             alt="{{ sections.about.media.alt }}" 
             class="w-full h-auto">
      </div>
      {% endif %}
    </div>
  </div>
</section>
