{{ define "right" }}{{ end }}
{{ define "article" }}
  <article class="w-full max-w-5xl pb-10 md:pb-16">
    {{ partial "breadcrumbs.html" . }}
    <header class="max-w-3xl pb-8 md:pb-10">
      <h1
        data-pagefind-weight="10"
        class="mb-3 text-4xl leading-tight font-semibold tracking-tight text-balance text-gray-950 md:text-5xl dark:text-white"
      >
        Get started with Docker
      </h1>
      <p
        class="max-w-2xl text-lg leading-relaxed text-gray-600 dark:text-gray-300"
      >
        Install what you need, then choose a tutorial that matches what you want
        to do.
      </p>
    </header>

    <section class="mb-12 md:mb-16" aria-labelledby="install-heading">
      <h2
        id="install-heading"
        class="mb-5 text-2xl leading-tight font-semibold tracking-tight text-gray-950 dark:text-white"
      >
        Install what you need
      </h2>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        {{ range .Params.installs }}
          <a
            href="{{ .link }}"
            class="group block rounded-xl border border-gray-200 bg-white p-5 transition hover:scale-[1.01] hover:border-blue-500 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-400/40 motion-reduce:transform-none dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
          >
            <p
              class="mb-2 font-mono text-xs font-semibold tracking-[0.12em] text-gray-600 uppercase dark:text-gray-300"
            >
              {{ .eyebrow }}
            </p>
            <h3
              class="mb-1 text-lg font-semibold text-gray-950 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
            >
              {{ .title }}
            </h3>
            <p class="leading-relaxed text-gray-600 dark:text-gray-300">
              {{ .description }}
            </p>
          </a>
        {{ end }}
      </div>
    </section>

    <section aria-labelledby="tutorials-heading">
      <h2
        id="tutorials-heading"
        class="mb-5 text-2xl leading-tight font-semibold tracking-tight text-gray-950 dark:text-white"
      >
        Choose a tutorial
      </h2>
      <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
        {{ range .Params.tutorials }}
          <a
            href="{{ .link }}"
            class="group flex h-full flex-col rounded-xl border border-gray-200 bg-white p-6 transition hover:scale-[1.01] hover:border-blue-500 focus:outline-none focus-visible:ring-4 focus-visible:ring-blue-400/40 motion-reduce:transform-none dark:border-gray-700 dark:bg-gray-900 dark:hover:border-blue-500"
          >
            <p
              class="mb-3 font-mono text-xs font-semibold tracking-[0.12em] text-gray-600 uppercase dark:text-gray-300"
            >
              {{ .audience }}
            </p>
            <h3
              class="mb-2 text-xl leading-tight font-semibold tracking-tight text-gray-950 transition-colors group-hover:text-blue-600 dark:text-white dark:group-hover:text-blue-400"
            >
              {{ .title }}
            </h3>
            <p class="leading-relaxed text-gray-600 dark:text-gray-300">
              {{ .description }}
            </p>
          </a>
        {{ end }}
      </div>
    </section>
  </article>
{{ end }}