From 10070f39ad7b91dee37f953325726e8b56694c6c Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Thu, 1 Feb 2024 01:24:42 +0100
Subject: [PATCH] Add clip path to index images

---
 src/Eventindex.ce.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/Eventindex.ce.vue b/src/Eventindex.ce.vue
index d2c5168..a495153 100644
--- a/src/Eventindex.ce.vue
+++ b/src/Eventindex.ce.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))] font-nunito">
+  <div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fit,minmax(280px,max-content))] font-nunito justify-center">
     <a v-for="(event, index) in events" :key="index" href="#" @click.prevent="makeVisible(event)"
-      class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
-      <img :src="event.image" />
+      class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group max-w-[400px]">
+      <img :src="event.image"
+        class="flex-none w-full h-auto transition-all transition-linear duration-200 [clip-path:circle(200%_at_50%_-90%)] group-hover:[clip-path:circle(200%_at_50%_-102%)]" />
       <div class="p-6 flex flex-col grow">
         <h2 class="font-arvo flex-none text-primary text-sm md:text-base" v-text="event.name"></h2>
         <div class="flex items-baseline text-sm">