{{ $classes_box := "ba b--dark-gray bg-light-gray br3 flex flex-column flex-wrap items-center justify-center ph3 pv4 mb4 w-100 w-30-l " }}
{{ $gtag := .gtag | default "unknown" }}
{{ $classes_box := "ba b--dark-gray bg-light-gray br3 flex flex-column flex-wrap items-center justify-center ph3 pv4 mb4 w-100 w-30-l " }}
{{ $gtag := .gtag | default "unknown" }}
{{ $isFooter := (eq $gtag "footer") }}
{{ $utmSource := cond $isFooter "hugofooter" "hugohome" }}
{{ with .cx.Site.Data.sponsors }}
  <style>
    a.show-on-hover {
      opacity: 0;
    }
    a.show-on-hover:hover {
      opacity: 1;
    }
  </style>
  <section
    class="{{ $.classes_section | default "bg-primary-color-dark b--dark-gray bb bt ph5 pv4 w-100" }}">
    <div class="center mw9">
      <h3 class="b f3 mv0 light-gray">Hugo Sponsors</h3>
      <div class="flex-ns flex-wrap center justify-between pt3">
        {{ range .banners }}
          <div
            class="{{ $classes_box }} o-100"
            style="background-color: {{ .bgcolor }};">
            {{ $query_params := .query_params | default "" }}
            {{ $url := printf "%s?%s%s" .link $query_params (querify "utm_source" $utmSource "utm_medium" "banner" "utm_campaign" (.utm_campaign | default "hugosponsor")) | safeURL }}
            {{ $logo := resources.Get .logo }}
            {{ if hugo.IsProduction }}
              {{ $gtagID := printf "Sponsor %s %s" .name $gtag | title }}
              <a
                href="{{ $url }}"
                onclick="trackOutboundLink({{ printf "'%s', '%s'" $gtagID $url | safeJS }});"
                class="w-100 grow pa3{{ if .show_on_hover }}
                  show-on-hover
                {{ end }}"
                style="">
                {{ $logo.Content | safeHTML }}
              </a>
            {{ else }}
              <a
                href="{{ $url }}"
                class="w-100 grow pa3{{ if .show_on_hover }}
                  show-on-hover
                {{ end }}">
                {{ $logo.Content | safeHTML }}
              </a>
            {{ end }}
          </div>
        {{ end }}
      </div>
    </div>
  </section>
{{ end }}
