Fix Homepage collage's active photo effect while hover

- Change method and use a class on collage itself fading all photos, then highlight the one being hovered
- For some reason the content inside was conflicting the mouseenter event

src/components/molecules/PhotoCard.svelte

@@ -21,14 +21,14 @@
 </script>
 
 <div class="photo-card"
-    class:is-inactive={hovered}
+    class:is-hovered={hovered}
     on:mouseenter={() => sendHover(true)}
     on:focus={() => sendHover(true)}
     on:mouseout={() => sendHover(false)}
     on:blur={() => sendHover(false)}
 >
     {#if url}
-        <a href={url}>
+        <a href={url} sveltekit:noscroll>
             <Image
                 id={id}
                 sizeKey="postcard"

src/components/organisms/Collage.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if photos}
-    <div class="collage">
+    <div class="collage" class:is-hovering={hovered !== null}>
         {#each photos as { slug, title, image, location, city }, index}
             <PhotoCard
                 id={image.id}
@@ -16,7 +16,7 @@
                 title={title}
                 location={location}
                 city={city}
-                hovered={hovered !== null && hovered !== index}
+                hovered={hovered === index}
                 on:hover={({ detail }) => hovered = detail ? index : null}
             />
         {/each}

src/style/molecules/_photo-card.scss

@@ -34,6 +34,7 @@
         flex-wrap: wrap;
         align-items: center;
         color: $color-cream;
+        pointer-events: none;
         font-size: clamp(#{rem(12px)}, 1.5vw, #{rem(14px)});
 
         @include bp (sm) {

src/style/organisms/_collage.scss

@@ -191,10 +191,18 @@
         }
 
         // Not hovered
-        &.is-inactive {
+        &.is-hovered {
             img {
-                opacity: 0.5;
+                opacity: 1.0 !important;
             }
         }
     }
+
+    // Mouse over collage
+    &.is-hovering {
+        .photo-card img {
+            opacity: 0.5;
+        }
+    }
+
 }