{{ define "main" }}
  <!-- Features -->
  {{ $tick := 0 }}
  {{ range $i, $e:= .Params.features }}

  <section class="section-sm nim-h-screen relative feature pb-2 pt-2" style="background-color: {{ .bg_color }}">
    {{ with .transition }}
    {{ if .start }}
    <div
      class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mt-20 -mt-16 {{ .start_class }}"
      style="height: 100px;z-index:2;mask-image: url('{{ .start }}');background-color: {{ .start_color }};"></div>
    {{ end }}
    {{ if .start_dark }}
    <div
      class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mt-20 -mt-16 {{ .start_class }}"
      style="height: 100px;z-index:2;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};">
    </div>
    {{ end }}
    {{ end }}
    {{ with .bg_img }}
    {{ $res := resources.Get .img }}
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
      style="background-image: url('{{ $res.RelPermalink }}')"></div>
    {{ end }}

    <div class="container relative mx-auto" style="z-index: 2;">
      <div class="row items-center justify-between">
        {{ if eq .side "center" }}
        <div class="mx-auto md:col-8 lg:col-8 {{ .content_class }}">
          {{ if .subtitle }}
          <h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
          {{ end }}
          <h2 class="mb-4 {{ .title_class }}">
            {{ .title | markdownify }}
          </h2>
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <!-- grid -->
          {{ range $i, $e := .grid }}
          <div class="p-4 row">
            <div class="col-1">
              <h3 style="color: {{ .color }}">{{ add $i 1  }}</h3>
            </div>
            <div class="col-11">
              <h4 class="font-bold mb-2" style="color: {{ .color }}">{{ .title }}</h4>
              <p class="{{ .content_class }}">{{ .content | markdownify }}</p>
            </div> 
          </div>
          {{ end }}
          </div>
          <!-- end: grid -->

          <p class="mb-8 text-lg">
            {{ .content | markdownify }}
          </p>
          <ul>
            {{ range .bulletpoints }}
            <li class="relative mb-4 pl-6">
              <i class="fa fa-check absolute left-0 top-1.5"></i>
              {{ . | markdownify }}
            </li>
            {{ end }}
          </ul>
          {{ with .button }}
          {{ if .enable }}
          <a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
            {{ .label }}
            <i class="fa fa-arrow-right pl-2"></i>
          </a>
          {{ end }}
          {{ end }}
        </div>
        {{ else }}

        {{ if eq .side "left" }}
        {{ $tick = 0 }}
        {{ else if eq .side "right" }}
        {{ $tick = 1 }}
        {{ end }}

        {{ with .bg_img }}
        {{ if .parallax }}
        <div class="relative h-screen overflow-hidden">
          <div class="absolute inset-0 bg-no-repeat bg-cover 
                          bg-fixed parallax-bg" style="background-image: url('{{ .img }}');">
          </div>
        </div>
        {{ end }}
        {{ end }}

        <div class="mb:md-0 md:col-5 mb-6
        {{ if eq $tick 1 }}
          md:order-2
        {{ end }}">

          {{ if .image }}
          {{ $res := resources.Get .image }}
          <img loading="lazy" decoding="async" src="{{ $res.RelPermalink }}" class="img rounded-full w-[384px] h-[384px] object-cover w-full h-auto">
          {{ end }}
        </div>
        <div class="{{ if eq $tick 0 }}
            md:order-1
          {{ end }} md:col-7 lg:col-6">
          {{ if .subtitle }}
          <h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
          {{ end }}
          <h2 class="mb-4 {{ .title_class }}">
            {{ .title | markdownify }}
          </h2>
          <p class="mb-8 text-lg {{ .content_class }}">
            {{ .content | markdownify }}
          </p>
          <ul>
            {{ range .bulletpoints }}
            <li class="relative mb-4 pl-6">
              <i class="fa fa-check absolute left-0 top-1.5"></i>
              {{ . | markdownify }}
            </li>
            {{ end }}
          </ul>
          {{ with .button }}
          {{ if .enable }}
          <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
            {{ .label }}
            <i class="fa fa-arrow-right pl-2"></i>
          </a>
          {{ end }}
          {{ end }}
        </div>
        {{ if eq $tick 0 }}
        {{ $tick = 1}}
        {{ else }}
        {{ $tick = 0 }}
        {{ end }}

        {{ end }}
      </div>
    </div>
    {{ with .transition }}
    {{ if .end }}
    <div
      class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block xl:-mb-20 -mb-16  {{ .end_class }}"
      style="height: 100px;z-index:2;mask-image: url('{{ .end }}');background-color: {{ .end_color }};"></div>
    {{ end }}
    {{ if .end_dark }}
    <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden xl:-mb-20 -mb-16 {{ .end_class }}"
      style="height: 100px;z-index:2;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};">
    </div>
    {{ end }}
    {{ end}}
  </section>
  {{ end }}
  <!-- /Features -->
{{ end }}