
<section class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
  
  <div data-aos="fade-right" class="space-y-5">
    <h2
      class="text-2xl md:text-3xl font-bold text-[#1F2937]"
      style="font-family: Inter, sans-serif"
    >
      {{ sections.about.title }}
    </h2>

    <p class="text-gray-600 text-base leading-relaxed max-w-md">
      {{ sections.about.content }}
    </p>
  </div>

  
  <div data-aos="fade-left">
    {% for item in sections.about.media.items %} {% if item.type == 'image' %}
    <img
      src="{{ item.src }}"
      alt="{{ item.alt }}"
      class="w-full max-w-md mx-auto rounded-xl shadow-sm"
      loading="{% if item.lazyLoad %}lazy{% else %}eager{% endif %}"
    />
    {% elif item.type == 'video' %}
    <video
      controls
      class="w-full max-w-md mx-auto rounded-xl shadow-sm"
      {%
      if
      item.poster
      %}poster="{{ item.poster }}"
      {%
      endif
      %}
      {%
      if
      item.autoplay
      %}autoplay
      muted
      loop{%
      endif
      %}
    >
      <source src="{{ item.src }}" type="video/mp4" />
    </video>
    {% endif %} {% endfor %}
  </div>
</section>
