How can I get a modal to be larger on desktop?

I am trying to get the modal on the site I'm working on to open larger on a desktop and to change to a vertical view in mobile, like these examples which I designed in Figma:

.

Any help with what I could change in the code to reflect these images would be amazing.

{showModal ? (
            <>
            
          <div
            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
            onClick={() => setShowModal(false)}
          >
            
            <div className="relative w-auto my-6 mx-auto max-w-3xl grid grid-cols-2 "> 
            {/* which grid? number one */}
            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
            <Image
        src={ImageLink}
        alt="Work?"
        width="600"
        height="600"
        layout="responsive"
        onClick={() => setShowModal(true)}

      />  

</div>
              {/*content*/}
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
                  <h3 className="text-3xl font-semibold">
{Name}                  </h3>
                  <button
                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                    onClick={() => setShowModal(false)}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-gray-600 text-lg leading-relaxed">
                   {Description}
                  </p>
                </div>
                {/*footer*/}
                <div className="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b">
                  <button
                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    // onClick={() => setShowModal(false)}
                  >
                    Contact
                  </button>
                  <button
                    className="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    // onClick={() => setShowModal(false)}
                  >
Make an Offer                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

I'm just stuck on tailwind documentation - trying to use the grid system, it just doesn't want to work and would love to understand where i'm going wrong.

Here is a link to the current site to see how it looks currently https://greenr-two.vercel.app/example

thanks in advance,