{{ define "main" }}
<article style="padding-top: 2em;">
	{{.Content}}
</article>
<div class="contained" style="max-width: 50%; padding-bottom: 2em;">
    <h3>Posts:</h3>
    <div style="display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));">
    {{ range .Pages }}
        <div style="border: 1px solid #00ADFF; border-radius: 10px;">
            {{ if .Params.images }}
            <img src="{{ index .Params.images 0}}" style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; height: 15em; object-fit: cover;"/>
            {{ else }}
            <img src="/img/1*ug9TIbMQlsa4SGxbs0kwgw.jpeg" style="border-top-left-radius: 10px; border-top-right-radius: 10px; width: 100%; height: 15em; object-fit: cover; filter: grayscale(50%); -webkit-filter: grayscale(50%);"/>
            {{ end }}
            <a href="{{.Permalink}}" style="padding: 1em; display: inline-block;">{{.Date.Format "02/01/2006"}} | "{{.Title}}"</a>
            <div style="padding-left: 1em; padding-right: 1em;">
                {{ .Summary }}...
                <p style="text-align: right;"><a href="{{.Permalink}}">Read More</a></p>
            </div>
            <p style="text-align: right; padding: 1em;"><small>Reading Time: {{ .ReadingTime }}m</small></p>
        </div>
    {{ end }}
    </div>
</div>
{{ end }}