{{ define "main" }}
<div class="blog-container">
    <h1 class="blog-title">Blog</h1>
    <div class="bento-grid blog-grid">
        {{ range $index, $element := .Pages }}
        <article class="bento-item {{ index (slice "large" "medium" "small") (mod $index 3) }}">
            <a href="{{ .Permalink }}" class="bento-link">
                {{ if .Params.image }}
                <div class="bento-image">
                    <img src="{{ .Params.image }}" alt="{{ .Title }}">
                </div>
                {{ end }}
                <div class="bento-content">
                    <h2>{{ .Title }}</h2>
                    <div class="post-meta">
                        <time>{{ .Date.Format "02 Jan 2006" }}</time>
                        {{ with .Params.categories }}
                        <span class="categories">
                            {{ range . }}
                            <span class="category">{{ . }}</span>
                            {{ end }}
                        </span>
                        {{ end }}
                    </div>
                    <p>{{ .Summary }}</p>
                </div>
            </a>
        </article>
        {{ end }}
    </div>
</div>
{{ end }}