Fix potential breaking in gallery

src/components/gallery/Gallery.tsx

@@ -27,7 +27,7 @@ export default function Gallery({ works }: GalleryProps): JSX.Element {
 						key={work.title + work.author}
 						className={clsx(
 							"flex flex-col",
-							"hover:z-30 transform-gpu hover:scale-105 transition ease-in-out",
+							"transform-gpu hover:scale-105 transition ease-in-out",
 							i !== works.length - 1 && "mb-3 md:mb-4 xl:mb-8",
 						)}
 					>
@@ -39,7 +39,7 @@ export default function Gallery({ works }: GalleryProps): JSX.Element {
 							}}
 						>
 							<img
-								className="hover:z-20 rounded-t-lg transform-gpu hover:scale-105 transition ease-in-out"
+								className="rounded-t-lg transform hover:scale-105 transition ease-in-out"
 								src={work.image.src}
 								alt={work.title}
 							/>

src/styles/components.css

@@ -78,7 +78,7 @@ body {
 	/* line-height: 0; */
 }
 
-.work-gallery figure {
+.work-gallery * {
 	-webkit-column-break-inside: avoid;
 	page-break-inside: avoid;
 	break-inside: avoid;

tailwind.config.js

@@ -14,9 +14,7 @@ module.exports = {
 		},
 	},
 	variants: {
-		extend: {
-			zIndex: ["hover"],
-		},
+		extend: {},
 	},
 	plugins: [],
 };