circle resize

src/pages/InfrastructurePage.tsx

@@ -9,13 +9,16 @@ function InfrastructurePage() {
 
   return (
     <div className="h-screen overflow-hidden">
-      <div
-        className="absolute rounded-full h-[85vh] top-[calc(50vh-47.5%)] left-[calc(54.9vw-42.5vh)] border-[3px] bg-black z-50 aspect-square transition-transform duration-300 ease-in-out"
-        style={{
-          background: "radial-gradient(transparent 60%, #0079C2 100%)",
-          transform: `scale(${selectedRange / 800})`,
-        }}
-      ></div>
+      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+        <div
+          className="rounded-full h-[3700px] border-[3px] bg-black z-50 aspect-square transition-transform duration-300 ease-in-out"
+          style={{
+            background: "radial-gradient(transparent 60%, #0079C2 100%)",
+            transform: `scale(${selectedRange / 800})`,
+            borderWidth: `${3 * (2 - selectedRange / 800)}px`,
+          }}
+        ></div>
+      </div>
       <div className="absolute h-full top-0 left-0 z-[99999999] w-[260px] bg-[#002347] bg-opacity-90 select-none px-6 py-5 flex flex-col justify-between gap-8">
         <div className="flex flex-col gap-3">
           <div className="flex justify-end">
@@ -29,9 +32,9 @@ function InfrastructurePage() {
         <Button text="Генплан" icon={<ArrowLeftIcon />} widthFull />
       </div>
       <img
-        src={`/images/Infra/NKS.png`}
+        src={`/images/Infra/NKS.jpg`}
         alt=""
-        className={`absolute h-full w-full select-none pointer-events-none opacity-100}`}
+        className={`absolute object-cover h-full w-full select-none pointer-events-none opacity-100}`}
       />
     </div>
   );