<section class="py-24 bg-white relative overflow-hidden" id="features">
  <!-- Subtle background elements -->
  <div class="absolute inset-0 bg-[#F8F8F8] opacity-50 -skew-y-6 transform origin-top-left h-1/2"></div>
  
  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <!-- Elegant section header -->
    <div class="text-center mb-20">
      <span class="inline-block text-xs uppercase tracking-widest text-gray-500 mb-3">
        Curated Collection
      </span>
      <h2 class="text-3xl sm:text-4xl font-light text-gray-900 mb-4">
        {{ sections.features.title }}
      </h2>
      <div class="w-16 h-px bg-gray-300 mx-auto mb-6"></div>
      <p class="text-gray-600 max-w-xl mx-auto font-light">
        {{ sections.features.content }}
      </p>
    </div>

    <!-- Elegant clothing showcase -->
    <div class="space-y-32">
      {% for item in sections.features.items %}
        <!-- Alternating layout with clean lines -->
        <div class="flex flex-col {% if loop.index % 2 == 0 %}md:flex-row-reverse{% else %}md:flex-row{% endif %} items-center">
          <!-- Image with minimal frame -->
          <div class="w-full md:w-3/5 mb-10 md:mb-0 {% if loop.index % 2 == 0 %}md:pl-12{% else %}md:pr-12{% endif %}">
            <div class="relative">
              <div class="aspect-[3/4] overflow-hidden">
                <img
                  src="{{item.media.src}}"
                  class="w-full h-full object-cover"
                  alt="{{item.media.alt}}"
                />
              </div>
              <!-- Minimal caption -->
              <div class="absolute bottom-4 right-4 bg-white py-1 px-3 text-xs tracking-wider text-gray-500">
                New Collection
              </div>
            </div>
          </div>
          
          <!-- Content with minimal styling -->
          <div class="w-full md:w-2/5">
            <div class="max-w-md">
              <h3 class="text-2xl font-light text-gray-900 mb-4 tracking-wide">
                {{item.title}}
              </h3>
              <div class="w-10 h-px bg-gray-300 mb-6"></div>
              <p class="text-gray-600 mb-8 font-light">{{item.subtitle}}</p>
              
              <!-- Feature highlights with minimal styling -->
              <div class="space-y-4 mb-10">
                <div class="flex items-start">
                  <span class="text-xs mr-3 mt-1">—</span>
                  <span class="text-gray-700 font-light">Ethically sourced materials</span>
                </div>
                <div class="flex items-start">
                  <span class="text-xs mr-3 mt-1">—</span>
                  <span class="text-gray-700 font-light">Handcrafted with precision</span>
                </div>
                <div class="flex items-start">
                  <span class="text-xs mr-3 mt-1">—</span>
                  <span class="text-gray-700 font-light">Timeless design aesthetic</span>
                </div>
              </div>
              
              <!-- Minimal CTA -->
              <a
                href="#"
                class="inline-block px-8 py-3 border border-gray-900 text-gray-900 text-sm tracking-widest uppercase hover:bg-gray-900 hover:text-white transition-colors duration-300"
              >
                View Collection
              </a>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
    
    <!-- Seasonal collection showcase -->
    <div class="mt-32">
      <h3 class="text-2xl font-light text-center text-gray-900 mb-2 tracking-wide">Seasonal Collections</h3>
      <div class="w-16 h-px bg-gray-300 mx-auto mb-16"></div>
      
      <div class="flex flex-col md:flex-row gap-6">
        <!-- Collection card 1 -->
        <div class="flex-1 group">
          <div class="relative overflow-hidden mb-4">
            <img src="/static/images/collections/spring.jpg" alt="Spring Collection" class="w-full aspect-[3/4] object-cover transition duration-700 group-hover:scale-105" />
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <h4 class="text-lg font-light text-gray-900 mb-1">Spring Collection</h4>
          <p class="text-sm text-gray-500">Lightweight essentials</p>
        </div>
        
        <!-- Collection card 2 -->
        <div class="flex-1 group">
          <div class="relative overflow-hidden mb-4">
            <img src="/static/images/collections/summer.jpg" alt="Summer Collection" class="w-full aspect-[3/4] object-cover transition duration-700 group-hover:scale-105" />
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <h4 class="text-lg font-light text-gray-900 mb-1">Summer Collection</h4>
          <p class="text-sm text-gray-500">Breathable fabrics</p>
        </div>
        
        <!-- Collection card 3 -->
        <div class="flex-1 group">
          <div class="relative overflow-hidden mb-4">
            <img src="/static/images/collections/autumn.jpg" alt="Autumn Collection" class="w-full aspect-[3/4] object-cover transition duration-700 group-hover:scale-105" />
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <h4 class="text-lg font-light text-gray-900 mb-1">Autumn Collection</h4>
          <p class="text-sm text-gray-500">Transitional pieces</p>
        </div>
        
        <!-- Collection card 4 -->
        <div class="flex-1 group">
          <div class="relative overflow-hidden mb-4">
            <img src="/static/images/collections/winter.jpg" alt="Winter Collection" class="w-full aspect-[3/4] object-cover transition duration-700 group-hover:scale-105" />
            <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
          </div>
          <h4 class="text-lg font-light text-gray-900 mb-1">Winter Collection</h4>
          <p class="text-sm text-gray-500">Warm, luxurious textures</p>
        </div>
      </div>
    </div>
  </div>
</section>