{{ with site.GetPage .page }}
  {{ with .Params.service }}
      <div class="my-container">
        <div class="section-title text-center">
          <h1 data-aos="fade-up">{{ .title | markdownify }}</h1>
          <h2 data-aos="fade-up">{{ .description | markdownify }}</h2>
        </div>

        <div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up">
          {{ range .service_item }}
            {{ if eq $.type "zoom" }}
              <div class= "service-item zoom-wrap" >
                <a href="{{ .link | relURL }}">
                  <img src="{{ .picture | relURL }}" alt="{{ .name }}">
                  <div class="overlay"></div>
                  <div class="overlay-text responsive-text">{{ .name }}</div>
                </a>
              </div>
            {{ else }}
              <div class="info-card">
                <i class="{{ .icon }}" aria-hidden="true"></i>
                <h3>{{ .name | markdownify }}</h3>
                <p>{{ .content | markdownify }}</p>
              </div>
            {{ end }}
          {{ end }}
        </div>
      </div>

  {{ end }}
{{ end }}