{#
/**
 * @file
 * Template for the Testimonial Wrapper component.
 *
 * Available variables:
 * - bg_color: (string) Background color key (primary, secondary, gradient, tertiary).
 * - title: (string) Section title.
 * - content: (array) Rendered content for cards or children.
 * - cta: (array) Rendered "Call To Action" link(s) or buttons.
 * - attributes: (object) HTML attributes for the wrapper element.
 */
#}


{# Wrapper section #}
<div{{ attributes.addClass(
  'content',
  'max-w-[1920px]',
  'mx-auto',
  'w-full',
  'relative',
  'py-[clamp(34px,5vw,101px)]',
  'px-[clamp(20px,5vw,50px)]',
  'lg:px-24'
) }}>
  <div class="flex items-center justify-between">
  {# --- Section Title --- #}
  {% if title %}
    <h2 class="text-[clamp(34px,6vw,50px)] font-medium   ">
      {{ title }}
    </h2>
  {% endif %}
    {# --- Call To Action --- #}
  {% if cta %}
    <div class="more flex flex-wrap  gap-3  text-tertiary-base">
      {{ cta }}
    </div>
  {% endif %}
  </div>

  {# --- Cards Container --- #}
  {% if content %}
    <div class="cards mt-[clamp(48px,5vw,64px)] grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
      {{ content }}
    </div>
  {% endif %}

</div>
