{{ if .Params.features }}
{{ $tick := 0 }}
{{ range $i, $e:= .Params.features }}

<section class="nim-h-screen relative feature {{ .section_class }}" style="background-color: {{ .bg_color }}">
  {{ with .transition }}
  {{ if .start }}
  <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:hidden block {{ .start_class }}"
    style="height: 100px;z-index:5;mask-image: url('{{ .start }}');background-color: {{ .start_color }};{{ .start_style | safeCSS }}">
  </div>
  {{ end }}
  {{ if .start_dark }}
  <div class="relative bg-center bg-top bg-cover bg-no-repeat dark:block hidden {{ .start_class }}"
    style="height: 100px;z-index:5;mask-image: url('{{ .start_dark }}');background-color: {{ .start_dark_color }};{{ .start_style | safeCSS }}">
  </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>
  {{ if .img2 }}
  {{ $res2 := resources.Get .img2 }}
  <div class="absolute inset-0 bg-cover bg-bottom bg-no-repeat z-10"
    style="background-image: url('{{ $res2.RelPermalink }}')"></div>
  {{ end }}
  {{ end }}

  <div class="container relative mx-auto" style="z-index: 5;">
    <div class="row items-center justify-between">
      {{ if eq .side "center" }}
      <div class="mx-auto md:col-10 lg:col-10 {{ .content_class }}">
        <div class="row">
          {{ if .subtitle }}
          <h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
          {{ end }}
          {{ if .image }}
            <figure class="flex justify-center items-center">
              {{ partial "image" (dict "Src" .image "Alt" "Banner" "Class" "w-1/3 h-1/3" ) }}
            </figure>
          {{ end }}
          <!-- timeline -->
          {{ if .timeline }}
          {{ partial "components/timeline.html" . }}
          {{ end }}
          <!-- timeline -->

          <h2 class="{{ .title_class }}">
            {{ .title | markdownify }}
          </h2>
          <!-- grid -->
          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
            {{ range $i, $e := .grid }}
            <div class="p-4 row">
              <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 -->

          <!-- notice -->
          {{ if .notice }}
          <div class="flex justify-center items-center">
          <p class="text-white">{{ .notice | markdownify }}</p>
          {{ end }}
          </div>
          <!-- end: notice -->
        </div>
        <!-- tickets -->
        {{ if .tickets }}
        {{ partial "components/ticket_list.html" . }}
        {{ end }}
        <!-- tickets -->
        <!-- q&a -->
        {{ if .qa }}
        {{ partial "components/questions.html" . }}
        {{ end }}
        <!-- q&a -->
        <!-- testimonials -->
        {{ if .testimonials }}
        {{ partial "components/testimonials.html" . }}
        {{ end }} 
        <!-- testimonials -->
        <!-- img_grid  -->
        {{ if .img_grid }}
        {{ partial "components/img_grid.html" . }}
        {{ end }}
        <!-- /img_grid  -->
        <!-- card_grid -->
        {{ if .card_grid }}
        {{ partial "components/card_grid.html" . }}
        {{ end }}
        <!-- card_grid -->

        <p class="mb-8 text-lg about-content">
          {{ .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 }}
        <div class="flex justify-center items-center">
        <a class="btn mt-6 {{ .class }}" href="{{ .link | absURL }}">
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        </div>
        {{ end }}
        {{ end }}
      </div>
      <br>
      {{ else }}

      {{ if eq .side "left" }}
      {{ $tick = 0 }}
      {{ else if eq .side "right" }}
      {{ $tick = 1 }}
      {{ 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 }}
        {{ if .image_link }}
          <a href="{{ .image_link }}">
        {{ end }}
        <img loading="lazy" decoding="async" src="{{ $res.RelPermalink }}"
          class="img w-[384px] h-[384px] object-cover w-full h-auto {{ .image_class }} ">
        {{ end }}
        {{ if .image_link }}
          </a>
        {{ end }}
      </div>
      <div class="{{ if eq $tick 0 }}
              md:order-1
            {{ end }} md:col-7 lg:col-6 {{ .content_class }}">
        {{ if .subtitle }}
        <h4 class="mb-4 {{ .subtitle_class }}">{{ .subtitle }}</h4>
        {{ end }}
        <h2 class="mb-4 about-content {{ if .title_class }} {{ .title_class }} {{ end }}">
          {{ .title | markdownify }}
        </h2>
        <p class="mb-8 text-lg about-content">
          {{ .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 {{ .button_class }}" 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 .bg_img }}
  {{ if .end_img }}
  {{ $res3 := resources.Get .end_img }}
  <div class="{{ .end_img_class }} z-10" style="background-image: url('{{ $res3.RelPermalink }}')"></div>
  {{ end }}
  {{ end }}

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