💄 (tps) better pilars design flex

index.html

@@ -30,7 +30,7 @@
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
           >
-            <rect width="1393" height="1288" fill="white" />
+            <rect width="1393" height="1288" />
             <circle
               cx="696.5"
               cy="295.5"

style.css

@@ -23,6 +23,7 @@ main {
   flex-direction: column;
   justify-content: center;
   gap: 0;
+  margin: 0 1rem;
 }
 
 .customer-satisfaction {
@@ -58,31 +59,31 @@ main {
   flex-direction: column;
 }
 
-.pilars section {
-  text-align: center;
-}
-
 .pilars h3 {
   background-color: var(--background-color);
-  padding: 1rem 4rem;
   margin-bottom: 0;
+  padding: 1rem 2rem;
+  width: calc(100% - (2rem * 2));
+  text-align: center;
 }
 
 .people-improvement {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 1;
 }
 
 .people-improvement svg {
-  max-width: 40vh;
+  min-width: 30vh;
+  max-width: 50vh;
   width: 100%;
-  align-self: center;
 }
 
 .just-in-time,
 .jidoka {
   display: flex;
+  flex: 2;
   flex-direction: column;
   align-items: center;
 }
@@ -135,8 +136,7 @@ li {
   }
 }
 
-// SVG
-
+/* SVG */
 .person,
 .arrow {
   fill: var(--background-color);