<section id="features" class="py-24">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-5xl font-bold text-center mb-6">
      {{sections.features.title}}
    </h2>
    <p class="text-xl text-gray-600 text-center mb-16 max-w-3xl mx-auto">
      {{sections.features.subtitle}}
    </p>
    <div class="space-y-24">
      {% for item in sections.features.items %}
      <div
        class="flex flex-col md:flex-row items-center gap-12 {% if loop.index % 2 == 0 %}md:flex-row-reverse{% endif %}"
      >
        <div class="flex-1 w-full md:w-auto">
          <img
            src="{{item.media.src}}"
            class="rounded-lg shadow-xl w-full"
            alt="{{item.media.alt}}"
          />
          <!-- Product Image Aspect Ratio: ASPECT_16_10 -->
        </div>
        <div class="flex-1 w-full md:w-auto">
          <h3 class="text-4xl font-bold mb-6">{{item.title}}</h3>
          <p class="text-lg text-gray-500 mb-8">{{item.subtitle}}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
