{{define "main"}}

<section class="section-sm">
  <div class="container">
    <div class="row justify-content-center">

      {{ with .Params.image }}
      <div class="col-lg-10 mb-5">
        {{ partial "image.html" (dict "Src" . "Class" "img-fluid rounded" "Alt" "about image") }}
      </div>
      {{ end }}

      <div class="col-lg-8 text-center">
        {{ if .Params.caption.enable }}
        {{ with .Params.caption }}
        <h2 class="text-dark font-weight-700">{{.title | markdownify}}</h2>
        {{ end }}
        {{ end }}

        {{ if .Params.social.enable }}
        {{ with .Params.social }}
        <ul class="social-links list-unstyled list-inline mt-4">
          {{ range .social_links }}
          <li class="list-inline-item"><a href="{{.link | safeURL}}">
              <i class="lab {{.icon}}"></i>
            </a></li>
          {{end}}
        </ul>
        {{ end }}
        {{ end }}

        <div class="content mt-3">
          {{.Content}}
        </div>
      </div>
    </div>
    
    {{ if .Params.what_i_do.enable }}
    {{ with .Params.what_i_do }}
    <div class="section-sm pb-0">
      <div class="row justify-content-center">
        <div class="col-12 text-center">
          <h3 class="text-dark font-weight-700 mb-5">{{ .title }}</h3>
        </div>
        {{ range .item }}
          <div class="col-lg-4 col-md-6 mt-4 text-center">
            <i class="{{.icon}} la-3x text-primary mb-4"></i>
            <h4 class="text-dark font-weight-700 mb-3">{{ .title }}</h4>
            <p>{{ .description }}</p>
          </div>
        {{end}}
      </div>
    </div>
    {{ end }}
    {{ end }}
  </div>
</section>

{{end}}