Refactor image handling and styling in project gallery page

app/(personal)/projects/[slug]/gallery/page.tsx

@@ -2,13 +2,11 @@ import { DoubleArrowLeftIcon, Share1Icon } from '@radix-ui/react-icons'
 import type { NextPage } from "next";
 import Head from "next/head";
 import Image from 'next/image';
-import Link from "next/link";
 
 import Gallery from "@/components/pages/project/Gallery";
 import { loadProject } from "@/sanity/loader/loadQuery";
 
-import Bridge from "../../../../../components/Icons/Bridge";
-import Logo from "../../../../../components/Icons/Logo";
+import Bridge from "../../../../../components/Icons/Bridge"
 
 
 type Props = {
@@ -32,16 +30,22 @@ const Home: NextPage = async ({ params }: Props,) => {
         <title>ঋণাত্মক - ২১: Images</title>
         <meta
           property="og:image"
-          content="https://nextjsconf-pics.vercel.app/og-image.png"
+          content={
+            `${initial?.data?.cloudinaryList[0]?.secure_url}` ||
+            '/image/screenshot.png'
+          }
         />
         <meta
           name="twitter:image"
-          content="https://nextjsconf-pics.vercel.app/og-image.png"
+          content={
+            `${initial?.data?.cloudinaryList[0]?.secure_url}` ||
+            '/image/screenshot.png'
+          }
         />
       </Head>
       <main className="mx-auto max-w-[1960px] p-4">
         <div className="columns-1 gap-4 sm:columns-2 xl:columns-3 2xl:columns-4">
-          <div className="after:content border-spacing-2 border relative mb-5 flex h-[540px] flex-col items-center justify-end gap-4 overflow-hidden rounded-lg bg-white/90 px-6 pb-16 pt-64 text-center shadow-highlight after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:shadow-highlight lg:pt-0">
+          <div className="after:content border-spacing-2 border relative mb-5 flex h-[540px] md:[h-600px] lg:h-[650px] flex-col items-center justify-end gap-4 overflow-hidden rounded-lg bg-white/90 px-6 pb-16 pt-64 text-center shadow-highlight after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:shadow-highlight lg:pt-0">
             <a
               className="pointer z-10 rounded-lg border absolute top-2 left-2 border-black hover:bg-black px-3 py-2 text-sm font-semibold hover:text-white transition bg-black/10 text-black md:mt-4"
               href={`/projects/${params.slug}`}
@@ -61,12 +65,12 @@ const Home: NextPage = async ({ params }: Props,) => {
               <span className="absolute left-0 right-0 bottom-0 h-[400px] bg-gradient-to-b from-black/0 via-black to-black"></span>
             </div>
             {/* <Logo /> */}
-            <div className="">
+            <div className="w-36 h-36 md:w-40 md:h-40 lg:w-52 lg:h-52">
               <Image
                 src="/logo.jpg"
-                width={120}
+                width={520}
                 className=""
-                height={120}
+                height={520}
                 alt=""
               />
             </div>