Add image borders.

Author: nikoshell

src/pages/speakers.astro

@@ -78,15 +78,15 @@ const description = "Our conference speakers organized alphabetically";
                   href={`/speaker/${speaker.id}`}
                   class="flex flex-col items-center group"
                 >
-                  <div class="w-full aspect-square rounded-full overflow-hidden mb-3 ">
+                  <div class="w-full aspect-square rounded-full overflow-hidden mb-3 border-2 border-transparent group-hover:border-primary transition-all">
                     {speaker.data.avatar ? (
 
           <Image
             src={speaker.data.avatar}
             alt={`${speaker.data.name}'s profile picture`}
             height={250}
             width={250}
-            class="w-full h-full object-cover"
+            class="w-full h-full object-cover "
           />
                     ) : (
                       <div class="w-full h-full bg-[#f7efe6] flex items-center justify-center text-gray-500 text-xl">