{{ $class := .class }}
<section class="use-cases-vector-integrations {{ $class }}">
  <div class="container">
    <h4 class="use-cases-vector-integrations__title">{{ .context.Params.title }}</h4>
    <div class="row g-4 g-lg-5 {{ if eq $class "ai-agents-integrations" }}justify-content-center{{ end }}">
      {{ range .context.Params.integrations }}
        <div class="col-12 col-md-6 {{ if eq $class "ai-agents-integrations" }}col-xl-5{{ else }}col-xl-4{{ end }}">
          {{ if .url }}
            <a class="use-cases-vector-integrations__card" href="{{ .url }}">
              <img class="use-cases-vector-integrations__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
              <div class="use-cases-vector-integrations__card-info">
                <h6 class="use-cases-vector-integrations__card-title">{{ .title }}</h6>
                <p class="use-cases-vector-integrations__card-description">{{ .description }}</p>
              </div>
            </a>
          {{ else }}
            <div class="use-cases-vector-integrations__card">
              <img class="use-cases-vector-integrations__card-icon" src="{{ .icon.src }}" alt="{{ .icon.alt }}" />
              <div class="use-cases-vector-integrations__card-info">
                <h6 class="use-cases-vector-integrations__card-title">{{ .title }}</h6>
                <p class="use-cases-vector-integrations__card-description">{{ .description }}</p>
              </div>
            </div>
          {{ end }}
        </div>
      {{ end }}
    </div>
  </div>
  {{ partial "top-and-bottom-overlay" (dict "context" . "class" "use-cases-vector-integrations") }}
</section>