aboutComplex page done

src/components/aboutComplex/RoveHomeSlider.tsx

@@ -135,7 +135,7 @@ const RoveHomeSlider = () => {
                 alt=""
                 className="select-none pointer-events-none xl:aspect-video sm:aspect-[7.6/10] aspect-video object-cover xl:h-auto"
               />
-              <div className="flex p-4 flex-col gap-3 bg-white rounded-ee-2xl rounded-es-2xl  sm:w-full w-[calc(100vw-32px)] h-full sm:hidden">
+              <div className="flex p-4 flex-col gap-3 bg-white rounded-ee-2xl rounded-es-2xl sm:hidden sm:w-full w-[calc(100vw-32px)] h-full">
                 <h2 className="text-[#00BED7] font-semibold text-subheadline-m">
                   {slide.title}
                 </h2>

src/pages/AboutComplex.tsx

@@ -126,7 +126,7 @@ const AboutComplex = () => {
         } grid grid-cols-12`}
       >
         <div className="flex px-6 py-4 col-span-full h-16 relative">
-          <div className="fixed z-50">
+          <div className="fixed z-[100]">
             <Button
               text="Masterplan"
               icon={<LeftArrowIcon />}
@@ -166,10 +166,10 @@ const AboutComplex = () => {
             ROVE AROUND THE CITY
           </div>
           <div className="xl:col-start-3 col-span-full grid grid-cols-10 gap-6">
-            <div className="xl:col-span-4 grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full">
+            <div className="xl:col-span-4 xl:grid grid-cols-4 gap-4 order-2 xl:order-1 col-span-full flex flex-nowrap overflow-x-scroll">
               {roveAroundTheCity.map((item) => (
                 <div
-                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3"
+                  className="xl:col-span-2 sm:col-span-1 col-span-2 bg-white rounded-lg flex flex-col p-3 sm:min-w-[calc(25vw-24px)] min-w-[calc(50vw-30px)]"
                   key={item.id}
                 >
                   <div className="flex gap-1 items-center">