added image gallery component; moved blurred background to separate CSS class

src/lib/lists/image-gallery.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+
+    export interface GalleryImage {
+        src: string;
+        alt: string;
+        desc: string;
+    }
+
+    let {
+        images,
+    }: {
+        images: GalleryImage[];
+    } = $props();
+
+    let currentIndex: number = $state(0);
+
+    function galleryBack() {
+        if (currentIndex == 0) {
+            currentIndex = images.length - 1;
+        } else {
+            currentIndex -= 1;
+        }
+    }
+
+    function galleryForward() {
+        if (currentIndex == images.length - 1) {
+            currentIndex = 0;
+        } else {
+            currentIndex += 1;
+        }
+    }
+</script>
+
+<div class="gallery-container">
+    <div class="gallery-button-container">
+        <button onclick={galleryBack}>&lt;</button>
+        <button onclick={galleryForward}>&gt;</button>
+    </div>
+    <img src={images[currentIndex].src} alt={images[currentIndex].alt}>
+</div>
+
+<style>
+    .gallery-container {
+        position: relative;
+        max-width: var(--media-width);
+        margin: 0 auto;
+        border: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);border-radius: var(--border-radius);
+    }
+
+    .gallery-container img {
+        width: 100%;
+        object-fit: contain;
+    }
+
+    .gallery-button-container {
+        position: absolute;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+    .gallery-button-container button {
+        background-color: aqua;
+        height: fit-content;
+        cursor: pointer;
+        font-size: 2.4rem;
+        line-height: 2.4rem;
+        padding: 8px;
+    }
+</style>