From d158eb1c32b794943ac9c9f7dead2e9192cdb269 Mon Sep 17 00:00:00 2001
From: Jared Schoeny <jared@schoeny.com>
Date: Fri, 24 Oct 2025 23:29:02 -1000
Subject: [PATCH] Improve gallery styling

---
 src/components/Hack/Gallery.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Hack/Gallery.tsx b/src/components/Hack/Gallery.tsx
index f59b310..fbf86ee 100644
--- a/src/components/Hack/Gallery.tsx
+++ b/src/components/Hack/Gallery.tsx
@@ -3,6 +3,7 @@
 import PixelImage from "../PixelImage";
 import React from "react";
 import useEmblaCarousel from "embla-carousel-react";
+import Image from "next/image";
 
 export default function Gallery({ images, title }: { images: string[]; title: string }) {
   const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true });
@@ -53,12 +54,12 @@ export default function Gallery({ images, title }: { images: string[]; title: st
           <button
             key={`${src}-${i}`}
             onClick={() => emblaApi && emblaApi.scrollTo(i)}
-            className={`relative h-16 w-28 overflow-hidden rounded ring-1 ${
-              i === selectedIndex ? "ring-[var(--accent)]" : "ring-[var(--border)]"
+            className={`relative h-16 w-28 overflow-hidden rounded border-2 ${
+              i === selectedIndex ? "border-[var(--accent)]" : "border-[var(--border)]"
             }`}
             aria-label={`Show image ${i + 1}`}
           >
-            <PixelImage src={src} alt={`${title} screenshot ${i + 1}`} mode="cover" className="absolute inset-0" />
+            <Image src={src} alt={`${title} screenshot ${i + 1}`} fill className="absolute inset-0 object-cover" />
           </button>
         ))}
       </div>