Issue with grid-template-rows

The last row()is not being displayed. Am I missing something?

    <div className="grid grid-cols-[70%_30%] grid-rows-[max-content_auto_max-content]
                gap-x-4 w-screen h-screen">

      <div className=" bg-orange-300 col-[1_/_3] row-[1_/_2] max-h-[100px] pr-4">
        <Navbar />
      </div>

        {/* MAIN BODY */}
      <div className=" bg-slate-500 col-[1_/_2] row-[2_/_3]"> 
          <div className="min-h-full w-full ml-4
                          grid grid-rows-[70%_30%]">
                <div className="font-studio text-[28px] font-extrabold text-center">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos tempore voluptatibus non odit fuga itaque, quisquam magnam repellendus reprehenderit asperiores rerum magni, ea, pariatur eligendi expedita iste soluta repudiandae aliquam.
                </div>
                <div className="">
                    <div className="w-full h-[2px] bg-[#242b2d] skew-y-[-15deg]">

                    </div>
                </div>
                
          </div>
      </div>


      <div className="col-[1_/_2] row-[3_/_4] max-h-[100px] bg-orange-700
                    ">
        <Footer />
      </div>


        {/* SIDE PANEL */}
      <div className=" bg-green-500 ml-4 col-[2_/_3] row-[2_/_4] border-l-2 border-[#242b2d]">

      </div>



</div>

The footer appears to be below the main body. Did I miss something while declaring the grid-template-rows? I have added bg colors to make it clear.
This is the current layout. The footer is supposed to be orange