<div class="py-16">
    <h2>Neuigkeiten aus dem Verein</h2>
    <div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
        <?php foreach($news as $post): ?>
        <article class="flex flex-col items-start justify-between">
            <div class="relative w-full">
                <img src="<?= $post->image()->url() ?>" alt="" class="w-full h-64 rounded-xl object-cover" />
                <div class="absolute inset-0 rounded-2xl inset-ring inset-ring-gray-900/10"></div>
            </div>
            <div class="flex max-w-xl grow flex-col justify-between">
                <div class="mt-8 flex items-center gap-x-4 text-xs">
                    <time class="text-gray-500"><?= $post->date()->toDate("d.m.Y") ?></time>
                    <?php foreach($post->tags()->split() as $tag): ?>
                        <a href="<?= page('news')->url(['params' => ['tag' => $tag]]) ?>" class="relative z-10 rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100"><?= $tag ?></a>
                    <?php endforeach; ?>
                </div>
                <div class="group relative grow">
                    <h2>
                        <a href="<?= $post->url() ?>">
                            <span class="absolute inset-0"></span>
                            <?= $post->headline() ?>
                        </a>
                    </h2>
                    <p><?= $post->summary() ?></p>
                </div>
                <?php if ($user = $post->author()->toUser()): ?>
                    <div class="mt-6 flex border-t border-gray-900/5 pt-6">
                        <div class="relative flex items-center gap-x-4">
                            <img src="<?= $user->avatar()->url() ?>" alt="" class="size-10 rounded-full bg-gray-50" />
                            <div class="text-sm/6">
                                <p>
                                    <a href="#">
                                        <span class="absolute inset-0"></span>
                                        <div class="text-xl">
                                            <?= $user->username() ?>
                                        </div>
                                    </a>
                                </p>
                                <p class="text-sm"><?= $user->role()->title() ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </article>
        <?php endforeach; ?>
    </div>
</div>