apartment page

client/src/components/apartmentPage/ApartmentLayout.tsx

@@ -26,10 +26,10 @@ const ApartmentLayout = ({ currentApartment }: ApartmentLayoutProps) => {
   )?.layout;
 
   return (
-    <div className="p-10 pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
-      <div className="w-full xl:px-[304px] sm:px-24 h-full flex justify-center items-center">
+    <div className="p-[96px] pt-6 rounded-2xl bg-white flex flex-col items-center gap-8 relative h-full flex-1">
+      <div className="w-full px-24 h-full flex justify-center items-center">
         <img
-          className="w-full h-full object-contain max-h-[1362px]"
+          className="w-full h-full object-contain max-h-[1385px]"
           src={imageLayout ? imageLayout : apartmentLayoutImage}
           alt=""
         />

client/src/components/apartmentPage/StudioDescriptionSection.tsx

@@ -71,8 +71,8 @@ const StudioDescriptionSection = ({
     (aprt) => aprt.apartmentType === apartment.Unit_Type
   );
   return (
-    <section className="grid grid-cols-12 lg:gap-4 gap-3">
-      <div className="bg-white rounded-2xl lg:col-span-3 col-span-6 flex flex-col justify-between p-8">
+    <section className="grid grid-cols-12 gap-3">
+      <div className="bg-white rounded-2xl col-span-6 flex flex-col justify-between p-8 h-[1305px]">
         <div className="flex flex-col">
           <h2 className="text-[#0D1922] text-subheadline-l font-semibold">
             {apartmentDesc?.title}
@@ -82,7 +82,7 @@ const StudioDescriptionSection = ({
               {apartmentDesc.subTitle}
             </p>
           )}
-          <div className="flex flex-col gap-[10px] pt-6">
+          <div className="flex flex-col gap-[28px] pt-6">
             <p className="text-m text-[#73787C]">
               {apartmentDesc?.firstParagraph}
             </p>
@@ -101,7 +101,7 @@ const StudioDescriptionSection = ({
           </p> */}
         </div>
       </div>
-      <div className="lg:col-span-9 rounded-2xl overflow-clip col-span-6">
+      <div className="rounded-2xl overflow-clip col-span-6">
         <img
           src="/images/searchApartment/StudioFlex.png"
           alt=""

client/src/pages/Apartment.tsx

@@ -75,7 +75,7 @@ const ApartmentPage = () => {
   return (
     <div className="overflow-scroll h-screen w-screen pt-14 select-none">
       <div className="grid grid-cols-9 px-4 pt-6 pb-16 gap-4">
-        <div className="flex flex-col lg:col-span-7 col-span-full ">
+        <div className="flex flex-col col-span-full ">
           {currentApartment && (
             <ButtonPanel currentApartment={currentApartment} />
           )}
@@ -84,7 +84,7 @@ const ApartmentPage = () => {
           )}
         </div>
         {currentApartment && (
-          <div className="lg:col-span-2 rounded-lg col-span-full">
+          <div className="rounded-lg col-span-full">
             <ApartmentSidebar currentApartment={currentApartment} />
           </div>
         )}

client/tailwind.config.js

@@ -19,8 +19,10 @@ export default {
         3: "33.75px",
         2: "22.5px",
         16: "180px",
+        14: "157.5px",
       },
       margin: {
+        14: "157.5px",
         8: "90px",
         6: "67.5px",
         1: "11.25px",