Refactor gallery rounding

src/components/gallery/Gallery.tsx

@@ -39,12 +39,12 @@ export default function Gallery({ works }: GalleryProps): JSX.Element {
 							}}
 						>
 							<img
-								className="hover:z-20 transform-gpu hover:scale-105 transition ease-in-out"
+								className="hover:z-20 rounded-t-lg transform-gpu hover:scale-105 transition ease-in-out"
 								src={work.image.src}
 								alt={work.title}
 							/>
 						</button>
-						<figcaption className="p-4 bg-gray-900">
+						<figcaption className="p-4 bg-gray-900 rounded-b-lg">
 							<h4 className="pb-3 text-white text-lg">{work.title}</h4>
 							<h5 className="text-gray-400 text-sm">{work.author}</h5>
 						</figcaption>

src/styles/components.css

@@ -84,14 +84,6 @@ body {
 	break-inside: avoid;
 }
 
-.work-gallery img {
-	@apply rounded-t-lg;
-}
-
-.work-gallery figcaption {
-	@apply rounded-b-lg;
-}
-
 @media (min-width: 768px) {
 	.work-gallery {
 		-webkit-column-gap: 1rem;