{{ if .img_grid }}
<div class="container relative mx-auto px-4 {{ .img_grid.section_class }} img_grid_container">
  <p class="{{ .img_grid.title_class }}">{{ .img_grid.title }}</p>
  <div class="flex flex-wrap justify-center mx-auto lg:w-full md:w-5/6">
    {{ $img_title_class := .img_grid.img_title_class }}
    {{ $img_subtitle_class := .img_grid.img_subtitle_class }}
    {{ $option_class := .img_grid.img_class }}
    {{ range $i, $option := .img_grid.imgs }}
    <div class="w-1/2 md:w-1/3 p-2">
      <div class="flex justify-center align-items-center items-center w-full justify-items-center row {{ $option_class }}"
      {{ if .modal_target }} data-modal-show="{{ .modal_target }}" {{ end }}>
      {{ $imgres := .resources.Get $option.img }}
      {{ if $option.link}}
        <a href="{{ $option.link }}">
      {{ end }}
        <img class="w-10/12 rounded-lg mx-auto col-12" src="{{ $option.img }}" alt="{{ $option.title }}">
        {{ if $option.title }}
        <p class="{{ $option.title_class }} {{ $img_title_class }} col-12">{{ $option.title | markdownify }}</p>
        {{ end }}
        {{ if $option.subtitle }}
        <p class="{{ $option.subtitle_class }} {{ $img_subtitle_class }} col-12">{{ $option.subtitle | markdownify }}</p>
        {{ end }}
      {{ if $option.link}}
        </a>
      {{ end }}
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}