gallery updates

Author: varun-sappa

components/Gallery/index.tsx

@@ -4,9 +4,9 @@ import React from "react";
 const Gallery = () => {
   const photos = [
     { src: "/images/gallery/1.jpg", index: 1 },
-    // { src: "/images/gallery/2.jpg", index: 2 },
-    // { src: "/images/gallery/3.jpg", index: 3 },
-    // { src: "/images/gallery/4.jpg", index: 4 },
+    { src: "/images/gallery/2.jpg", index: 2 },
+    { src: "/images/gallery/3.jpg", index: 3 },
+    { src: "/images/gallery/4.jpg", index: 4 },
     { src: "/images/gallery/5.jpg", index: 5 },
     { src: "/images/gallery/6.jpg", index: 6 },
     { src: "/images/gallery/7.jpg", index: 7 },
@@ -22,40 +22,19 @@ const Gallery = () => {
   ];
 
   return (
-    <div>
-      <br />
-      {/* <div className="masonry grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
-        {photos.map((photo, index) => (
-          <div key={index}>
-          <div className='relative ml-2 mr-2 mt-2 mb-2'>
-          <img
+    <div className="masonry" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px', justifyContent: 'center', alignItems: 'center', padding: '10px' }}>
+      {photos.map((photo, index) => (
+        <div key={index} className="relative" style={{ width: '100%', height: '480px' }}>
+          <Image
             src={photo.src}
-            className="square-full scale-105 ease-in-out"
+            alt={`Photo ${index + 1}`}
+            layout="fill" // Fill the container, cropping the image
+            objectFit="cover" // Cover the container, cropping the image
           />
-          </div>
         </div>
-        ))}
-      </div> */}
-
-      <div className="masonry grid w-full grid-cols-2 justify-center gap-3 p-[10px] lg:grid-cols-3 xl:grid-cols-3">
-        {photos.map((photo, index) => (
-          <div key={index} className="relative">
-            {/* <div className="layout-intrinsic object-cover"> */}
-            <Image
-              src={photo.src}
-              width={500}
-              height={300}
-              alt={`Photo ${index + 1}`}
-            />
-            {/* </div> */}
-            {/* </div> */}
-          </div>
-        ))}
-      </div>
-      <br />
-      <br />
-      <br />
+      ))}
     </div>
   );
 };
+
 export default Gallery;