{{ with .card_grid }}

<div class="container mx-auto px-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
    {{ $card_class := .card_class }}
    {{ $card_title_class := .card_title_class }}
    {{ $card_subtitle_class := .card_subtitle_class }}
    {{ $card_bottom_text_class := .card_bottom_text_class }}
    {{ range $i, $option := .cards }}
    <div class="{{ $card_class }}"
    {{ if $option.modal_target }}
      data-modal-show="{{ $option.modal_target }}"
    {{ end }}>
      <img src="{{ $option.img }}" alt="$option.alt" class="w-full h-48 object-cover">
      <div class="p-6">
        <h3 class="{{ $card_title_class }} {{ $option.title_class }}">{{ $option.title }}</h3>
        <p class="{{ $card_subtitle_class }} {{ $option.subtitle_class }}">{{ $option.subtitle | markdownify }}</p>
        {{ if $option.bottom_text }}
        <p class="{{ $card_bottom_text_class}} {{ $option.bottom_text_class }}">{{ $option.bottom_text }}</p>
        {{ end }}
      </div>
    </div>
    {{ end }}
  </div>
</div>
{{ end }}