Fix the cursor for images that cannot be zoomed in lightbox

src/services/lightbox.js

@@ -3,6 +3,7 @@
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 import Mousetrap from 'mousetrap';
 import 'photoswipe/photoswipe.css';
+import '../../styles/shared/lighbox.scss';
 
 const prevHotKeys = ['a', 'ф', 'h', 'р', '4'];
 const nextHotKeys = ['d', 'в', 'k', 'л', '6'];

styles/shared/lighbox.scss

@@ -0,0 +1,39 @@
+.pswp-media__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.pswp-media__content {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: auto;
+}
+
+.pswp-media__title {
+  flex: 0;
+  color: white;
+
+  & > a,
+  & > a:hover,
+  & > a:focus {
+    color: inherit;
+  }
+}
+
+.pswp-media__embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+// Override the 'zoom-in' cursor for images that cannot be zoomed in
+.pswp__img {
+  cursor: default;
+}

styles/shared/media-viewer.scss

@@ -23,38 +23,3 @@ video:not(.pswp-media__embed) {
     }
   }
 }
-
-.pswp-media__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.pswp-media__content {
-  flex: 1;
-  position: relative;
-  width: 100%;
-  height: auto;
-}
-
-.pswp-media__title {
-  flex: 0;
-  color: white;
-
-  & > a,
-  & > a:hover,
-  & > a:focus {
-    color: inherit;
-  }
-}
-
-.pswp-media__embed {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}