{{ define "main" }}
<div class="home labs">
  <div class="labs-hero">
    <div class="container container--sm">
      <h1 class="title title--xl">{{ .Title }}</h1>
      {{ .Content }}
    </div>
  </div>

  <div class="container">
    <ul class="labs-grid">
      {{ range .Params.labs }}
      <li>
        <a class="labs-card" href="{{ .url }}" target="_blank" rel="noopener noreferrer">
          <span class="labs-card__image">
            {{ with .image }}
            <img src="{{ . }}" loading="lazy" alt="" />
            {{ else }}
            <span class="labs-card__image-placeholder">
              <img src="/svgs/promo-lab.svg" width="48" height="48" loading="lazy" alt="" />
            </span>
            {{ end }}
          </span>
          <span class="labs-card__body">
            {{ with .source }}<span class="labs-card__source">{{ . }}</span>{{ end }}
            <h3 class="labs-card__title">{{ .title }}</h3>
            <p class="labs-card__description">{{ .description }}</p>
            <span class="button button--text">
              Start Lab
              <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
                   aria-hidden="true">
                <path d="M1 5.12939C0.585787 5.12939 0.25 5.46518 0.25 5.87939C0.25 6.29361 0.585787 6.62939 1 6.62939V5.12939ZM12 5.12939L1 5.12939V6.62939L12 6.62939V5.12939Z"
                      fill="currentColor"/>
                <path d="M7.11108 1L12 5.7735L7.11108 10.7444" stroke="currentColor" stroke-width="1.5"
                      stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
          </span>
        </a>
      </li>
      {{ end }}
    </ul>
  </div>

  {{ partial "social.html" (dict "class" "social--inner social--use-case") }}
</div>
{{ end }}