{!--
  Renders the {section}…{/section} repeatable field used by foundation, about, works,
  and album entries. Must be embedded *inside* an {exp:channel:entries} loop so the
  {section} field is in scope. Pass nothing — relies on parent entry context.
--}
{section}
<section
  {if section:anchor}id="{section:anchor}"{/if}
  class="relative isolate overflow-hidden gf-section
    {if section:background_style == 'image'} bg-cover bg-center bg-no-repeat py-28 md:py-40 lg:bg-fixed{/if}"
  {if section:background_style == 'image'}
    style="background-image: linear-gradient(rgba(3,7,18,0.{section:background_image_overlay_top}), rgba(3,7,18,0.{section:background_image_overlay_bottom})), url('{section:background_image:w1920}'); background-size: {section:background_image_sizing};"
  {if:elseif section:background_style == 'solid'}
    style="background-color: {section:background_color};"
  {/if}
>
  <div class="gf-container" x-data="scrollReveal()" x-intersect.once="show()">
    <div class="max-w-3xl {if section:header_alignment == 'Left'}text-left{if:else}text-left lg:text-left{/if}"
      :class="visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'"
      class="transition duration-700 ease-out">
      {if section:header}<h2 class="gf-heading-2 text-white">{section:header}</h2>{/if}
      <div class="gf-prose mt-6 text-white/80">
        {section:content}
      </div>
    </div>
  </div>
</section>
{/section}