smaller gapes

index.css

@@ -11,7 +11,7 @@ li {
   flex: 1;
   list-style: none;
   text-align: center;
-  padding: 0.5rem 1rem;
+  padding: calc(var(--gap) / 2) var(--gap);
 }
 
 .focusable {
@@ -49,7 +49,7 @@ li {
 .customer-satisfaction-parent {
   filter: url(#round);
   /* Making the triangle fit the rest of the house */
-  margin: 0 -1rem;
+  margin: 0 -var(--gap);
 }
 
 .customer-satisfaction {
@@ -67,12 +67,12 @@ li {
 .customer-satisfaction h2,
 .customer-satisfaction p {
   margin: 0;
-  padding: 0 0.5rem 0.5rem;
+  padding: 0 calc(var(--gap) / 2) calc(var(--gap) / 2);
   border-radius: 0;
 }
 
 .levers {
-  margin: 0.5rem 0;
+  margin: calc(var(--gap) / 2) 0;
 }
 
 .levers ul {
@@ -82,8 +82,8 @@ li {
   justify-content: space-between;
   align-items: center;
   padding-left: 0;
-  row-gap: 0.5rem;
-  gap: 0.5rem;
+  row-gap: calc(var(--gap) / 2);
+  gap: calc(var(--gap) / 2);
 }
 
 .people-improvement {
@@ -108,7 +108,7 @@ li {
 .pilars h3 {
   margin-top: 0;
   margin-bottom: 0;
-  padding: 1rem 2rem;
+  padding: var(--gap) 2rem;
   width: calc(100% - (2rem * 2));
   text-align: center;
 }
@@ -119,7 +119,7 @@ li {
   flex: 2;
   flex-direction: column;
   align-items: center;
-  gap: 1rem;
+  gap: var(--gap);
 }
 
 .pilars ul {
@@ -128,7 +128,7 @@ li {
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  gap: 0.5rem;
+  gap: calc(var(--gap) / 2);
 }
 
 .pilars li {
@@ -142,8 +142,8 @@ li {
 .ground {
   display: flex;
   flex-direction: column;
-  margin: 0.5rem 0;
-  gap: 1rem;
+  margin: calc(var(--gap) / 2) 0;
+  gap: var(--gap);
 }
 
 .improvement ul,
@@ -174,7 +174,7 @@ main a:focus-visible {
 
 details.hud {
   font-size: 16px;
-  margin: 1rem;
+  margin: var(--gap);
 }
 
 details.hud li {