<div class="card h-100" data-aos="zoom-in">
    {{ $page := . }}
    <a href="{{ $page.RelPermalink }}" class="d-block">
        {{- with $page.Params.images -}}
            {{- $images := . -}}
            {{- with $page.Site.GetPage "section" "images" -}}
                {{- with .Resources.GetMatch (strings.TrimPrefix "/images/" (index $images 0)) -}}
                    {{- $image := . -}}
                    <img data-src="{{ $image.RelPermalink }}" class="card-img-top mx-auto d-block pt-2" alt="{{ $page.Title }}">
                {{- end -}}
            {{- end -}}
        {{- end -}}
        <div class="card-body">
            <h4 class="card-title">{{ $page.Title }}</h4>
            <p class="card-text text-muted text-uppercase">{{ $page.Date.Format "January 2, 2006" }}</p>
            <div class="card-text">
                {{ $page.Summary | plainify }}
            </div>
        </div>
    </a>
</div>
