<style>
    .diary-list {
        width: 90%;
    }

    @scope(.diary-list) {
        .day {
            display: flex;
            flex-direction: column;
            align-items: left;
            border-bottom: 1px dashed #ccc;
            padding: 1rem;
        }

        .created-at {
            font-size: 0.8rem;
            color: #888;
        }

        .contents {
            min-height: 3rem;
        }

        .images {
            display: flex;
            flex-wrap: wrap;
        }

        .thumbnail {
            width: 100px;
            height: 100px;
            overflow: hidden;
            margin: 5px;
        }

        .thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            aspect-ratio: 1/1;
        }
    }
</style>
<div class="diary-list">
    {PPP LOOP:articles}
    <section class="day">
        <span class="created-at">{PPP:articles.created_at[Y年m月d日]}</span>
        <div class="contents">{PPP:articles.contents}</div>
        {PPP IF:articles.media_count}
        <sction class="images">
            {PPP LOOP:articles.media}
            <div class="thumbnail">
                <a href="{PPP:article.url}" data-thumbnail><img src="{PPP SITE_URL}/images/{PPP:media.thumb_name}" data-src="{PPP SITE_URL}/images/{PPP:media.sub_dir}{PPP:media.file_name}" width="150" data-width="{PPP:media.width}" data-height="{PPP:media.height}" alt="{PPP:media.comment}"></a>
            </div>
            {/PPP LOOP}
        </sction>
        {/PPP IF}
    </section>
    {/PPP LOOP}
    {PPP INCLUDE:template2_parts_pagination.php}
</div>