{{ define "main" }}
<p>Year Page Layout</p>
  <!-- Banner -->
  {{ with .Params.banner }}
    <section class="section {{ .section_class }}">
      {{ with .bg_img }}
      {{ $res := resources.Get .img }}
      <div class="absolute inset-0 bg-cover bg-center bg-no-repeat {{ .bg_class }} {{ if .parallax }} bg-fixed parallax-bg {{ end }}"
        style="background-image: url('{{ $res.RelPermalink }}')"></div>
      {{ end }}

      <div class="container relative mx-auto" style="z-index: 12;">
        <div class="row justify-center">
          {{ if not .hide_banner_img }}
          <div class="col-12">
            {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading" "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }}
          </div>
          {{ end }}
          
          {{ with .triple_header }}
          {{ if .enable }}
          <div class="col-10">
            <div class="row flex items-end">
              <a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_left }}">
                {{ partial "image" (dict "Src" .img_left "Alt" .alt_text_left "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
                {{ partial "image" (dict "Src" .img_left_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
              </a>
              <a class="col-12 py-4 flex justify-center items-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_center }}">
                {{ partial "image" (dict "Src" .img_center "Alt" .alt_text_center "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
                {{ partial "image" (dict "Src" .img_center_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
              </a>
              <a class="col-12 py-4 flex justify-center h-full sm:!col-4 md:!col-4 lg:!col-4 xl:!col4 2xl:col-4" href="{{ .link_right }}">
                  {{ partial "image" (dict "Src" .img_right "Alt" .alt_text_right "Loading" "eager" "Class" "logo-light w-64 content-center h-full" ) }}
                  {{ partial "image" (dict "Src" .img_right_dark "Alt" .alt_text_right "Loading" "eager" "Class" "logo-dark w-64 content-center h-full" ) }}
                </a>
            </div>
          </div>
          {{ end }} 
          {{ end }}

          <div class="lg:col-7 md:col-9 mb-8 text-center">
            <h1 class="mb-8 text-h2 lg:-texth2">
              {{ .title | markdownify }}
            </h1>
            <p class="mb-8 text-white">
              {{ .content | markdownify }}
            </p>
            {{ with .button }}
              {{ if .enable }}
                <a class="{{ .class }}"
                  href="{{ .link | absURL }}"
                  {{ if strings.HasPrefix .link `http` }}
                    target="_blank" rel="noopener"
                  {{ end }}>
                  {{ .label }}
                  <i class="{{ .icon }}"></i>
                </a>
              {{ end }}
            {{ end }}
            {{ with .button2 }}
            {{ if .enable }}
              <a class="{{ .class }}"
                href="{{ .link | absURL }}"
                {{ if strings.HasPrefix .link `http` }}
                  target="_blank" rel="noopener"
                {{ end }}>
                {{ .label }}
                <i class="{{ .icon }}"></i>
              </a>
            {{ end }}
          {{ end }}
          {{ if .content_bottom }}
          <p class="{{ .content_bottom_class }}">
            {{ .content_bottom | markdownify }}
          </p>
          {{ end }}
          </div>
        </div>
      </div>
      {{ 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:12;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:12;mask-image: url('{{ .end_dark }}');background-color: {{ .end_dark_color }};{{ .end_style | safeCSS }}">
      </div>
      {{ end }}
      {{ end }}
    </section>
  {{ end }}
  <!-- /Banner -->
  
  <!-- Features -->
  {{ partial "components/features.html" . }}
  <!-- /Features -->

  <!-- Modals -->
  {{ partial "components/modals.html" . }}
  <!-- /Modals -->

  
{{ end }}