ply-css 1.3.3 → 1.4.1

package/dist/css/ply-core.css

@@ -1847,16 +1847,15 @@ table tfoot td {
   display: flex;
   flex: 0 1 auto;
   flex-flow: row wrap;
-  margin: 0 -0.5rem 1.5rem;
+  gap: var(--units-gap, 1rem);
+  margin: 0 0 1.5rem;
 }
 .units-row.reverse-direction, .units-row.right-to-left {
   flex-direction: row-reverse;
 }
 .units-row.split {
-  margin: 0 0 1.5rem;
-}
-.units-row.split [class*=unit-] {
-  padding: 0;
+  --units-gap: 0px;
+  gap: 0;
 }
 .units-row.centered-content {
   justify-content: center;
@@ -1884,7 +1883,6 @@ table tfoot td {
 
 [class*=unit-] {
   box-sizing: border-box;
-  padding: 0 0.5rem;
 }
 [class*=unit-].fill-height {
   display: flex;
@@ -1897,102 +1895,82 @@ table tfoot td {
 
 .unit-100 {
   flex-basis: 100%;
-  max-width: 100%;
 }
 
 .unit-90 {
-  flex-basis: 90%;
-  max-width: 90%;
+  flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
 }
 
 .unit-88 {
-  flex-basis: 87.5%;
-  max-width: 87.5%;
+  flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
 }
 
 .unit-80 {
-  flex-basis: 80%;
-  max-width: 80%;
+  flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
 }
 
 .unit-75 {
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
 }
 
 .unit-70 {
-  flex-basis: 70%;
-  max-width: 70%;
+  flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
 }
 
 .unit-66 {
-  flex-basis: 66.6%;
-  max-width: 66.6%;
+  flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
 }
 
 .unit-65 {
-  flex-basis: 65%;
-  max-width: 65%;
+  flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
 }
 
 .unit-62 {
-  flex-basis: 62.5%;
-  max-width: 62.5%;
+  flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
 }
 
 .unit-60 {
-  flex-basis: 60%;
-  max-width: 60%;
+  flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
 }
 
 .unit-50 {
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
 }
 
 .unit-40 {
-  flex-basis: 40%;
-  max-width: 40%;
+  flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
 }
 
 .unit-38 {
-  flex-basis: 37.5%;
-  max-width: 37.5%;
+  flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
 }
 
 .unit-35 {
-  flex-basis: 35%;
-  max-width: 35%;
+  flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
 }
 
 .unit-33 {
-  flex-basis: 33.3%;
-  max-width: 33.3%;
+  flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
 }
 
 .unit-30 {
-  flex-basis: 30%;
-  max-width: 30%;
+  flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
 }
 
 .unit-25 {
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
 }
 
 .unit-20 {
-  flex-basis: 20%;
-  max-width: 20%;
+  flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
 }
 
 .unit-12 {
-  flex-basis: 12.5%;
-  max-width: 12.5%;
+  flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
 }
 
 .unit-10 {
-  flex-basis: 10%;
-  max-width: 10%;
+  flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
 }
 
 .forever-unit-auto {
@@ -2002,292 +1980,226 @@ table tfoot td {
 
 .forever-unit-100 {
   flex-basis: 100%;
-  max-width: 100%;
 }
 
 .forever-unit-90 {
-  flex-basis: 90%;
-  max-width: 90%;
+  flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
 }
 
 .forever-unit-88 {
-  flex-basis: 87.5%;
-  max-width: 87.5%;
+  flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
 }
 
 .forever-unit-80 {
-  flex-basis: 80%;
-  max-width: 80%;
+  flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
 }
 
 .forever-unit-75 {
-  flex-basis: 75%;
-  max-width: 75%;
+  flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
 }
 
 .forever-unit-70 {
-  flex-basis: 70%;
-  max-width: 70%;
+  flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
 }
 
 .forever-unit-66 {
-  flex-basis: 66.6%;
-  max-width: 66.6%;
+  flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
 }
 
 .forever-unit-65 {
-  flex-basis: 65%;
-  max-width: 65%;
+  flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
 }
 
 .forever-unit-62 {
-  flex-basis: 62.5%;
-  max-width: 62.5%;
+  flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
 }
 
 .forever-unit-60 {
-  flex-basis: 60%;
-  max-width: 60%;
+  flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
 }
 
 .forever-unit-50 {
-  flex-basis: 50%;
-  max-width: 50%;
+  flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
 }
 
 .forever-unit-40 {
-  flex-basis: 40%;
-  max-width: 40%;
+  flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
 }
 
 .forever-unit-38 {
-  flex-basis: 37.5%;
-  max-width: 37.5%;
+  flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
 }
 
 .forever-unit-35 {
-  flex-basis: 35%;
-  max-width: 35%;
+  flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
 }
 
 .forever-unit-33 {
-  flex-basis: 33.3%;
-  max-width: 33.3%;
+  flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
 }
 
 .forever-unit-30 {
-  flex-basis: 30%;
-  max-width: 30%;
+  flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
 }
 
 .forever-unit-25 {
-  flex-basis: 25%;
-  max-width: 25%;
+  flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
 }
 
 .forever-unit-20 {
-  flex-basis: 20%;
-  max-width: 20%;
+  flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
 }
 
 .forever-unit-12 {
-  flex-basis: 12.5%;
-  max-width: 12.5%;
+  flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
 }
 
 .forever-unit-10 {
-  flex-basis: 10%;
-  max-width: 10%;
+  flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
 }
 
 @media (min-width: 1400px) {
   .large-screen-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .large-screen-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .large-screen-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .large-screen-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .large-screen-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .large-screen-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .large-screen-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .large-screen-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .large-screen-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .large-screen-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .large-screen-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .large-screen-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .large-screen-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .large-screen-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .large-screen-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (min-width: 1800px) {
   .x-large-screen-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .x-large-screen-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .x-large-screen-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .x-large-screen-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .x-large-screen-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .x-large-screen-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .x-large-screen-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .x-large-screen-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .x-large-screen-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .x-large-screen-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .x-large-screen-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .x-large-screen-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .x-large-screen-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .x-large-screen-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .x-large-screen-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 1024px) {
   .small-desktop-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .small-desktop-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .small-desktop-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .small-desktop-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .small-desktop-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .small-desktop-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .small-desktop-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .small-desktop-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .small-desktop-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .small-desktop-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .small-desktop-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .small-desktop-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .small-desktop-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .small-desktop-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .small-desktop-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .small-desktop-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 767px) {
@@ -2309,203 +2221,154 @@ table tfoot td {
   .unit-20,
   .unit-10 {
     flex-basis: 100%;
-    max-width: 100%;
   }
   .tablet-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .tablet-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .tablet-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .tablet-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .tablet-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .tablet-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .tablet-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .tablet-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .tablet-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .tablet-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .tablet-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .tablet-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .tablet-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .tablet-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .tablet-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .tablet-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 650px) {
   .large-phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .large-phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .large-phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .large-phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .large-phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .large-phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .large-phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .large-phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .large-phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .large-phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .large-phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .large-phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .large-phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .large-phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .large-phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .large-phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 @media (max-width: 480px) {
   .phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
 }
 .unit-push-90 {
@@ -3369,27 +3232,33 @@ table.table-hovered tbody tr:hover td {
 }
 
 .gap-xs {
-  gap: var(--ply-space-xs, 0.25rem);
+  --units-gap: var(--ply-space-xs, 0.25rem);
+  gap: var(--units-gap);
 }
 
 .gap-sm {
-  gap: var(--ply-space-sm, 0.5rem);
+  --units-gap: var(--ply-space-sm, 0.5rem);
+  gap: var(--units-gap);
 }
 
 .gap {
-  gap: var(--ply-space-md, 0.75rem);
+  --units-gap: var(--ply-space-md, 0.75rem);
+  gap: var(--units-gap);
 }
 
 .gap-lg {
-  gap: var(--ply-space-lg, 1.5rem);
+  --units-gap: var(--ply-space-lg, 1.5rem);
+  gap: var(--units-gap);
 }
 
 .gap-xl {
-  gap: var(--ply-space-xl, 2rem);
+  --units-gap: var(--ply-space-xl, 2rem);
+  gap: var(--units-gap);
 }
 
 .gap-xxl {
-  gap: var(--ply-space-xxl, 3rem);
+  --units-gap: var(--ply-space-xxl, 3rem);
+  gap: var(--units-gap);
 }
 
 .no-link-style a {
@@ -5833,84 +5702,64 @@ button.btn-white.btn-outline.btn-active {
 
 @container (max-width: 480px) {
   .container-phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-phone-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-phone-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-phone-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-phone-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-phone-unit-auto {
     flex-basis: 0;
@@ -5919,84 +5768,64 @@ button.btn-white.btn-outline.btn-active {
 }
 @container (max-width: 650px) {
   .container-large-phone-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-large-phone-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-large-phone-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-large-phone-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-large-phone-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-large-phone-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-large-phone-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-large-phone-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-large-phone-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-large-phone-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-large-phone-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-large-phone-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-large-phone-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-large-phone-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-large-phone-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-large-phone-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-large-phone-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-large-phone-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-large-phone-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-large-phone-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-large-phone-unit-auto {
     flex-basis: 0;
@@ -6005,84 +5834,64 @@ button.btn-white.btn-outline.btn-active {
 }
 @container (max-width: 767px) {
   .container-tablet-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-tablet-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-tablet-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-tablet-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-tablet-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-tablet-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-tablet-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-tablet-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-tablet-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-tablet-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-tablet-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-tablet-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-tablet-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-tablet-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-tablet-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-tablet-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-tablet-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-tablet-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-tablet-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-tablet-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-tablet-unit-auto {
     flex-basis: 0;
@@ -6091,84 +5900,64 @@ button.btn-white.btn-outline.btn-active {
 }
 @container (max-width: 1024px) {
   .container-small-desktop-unit-100 {
-    max-width: 100%;
     flex-basis: 100%;
   }
   .container-small-desktop-unit-90 {
-    max-width: 90%;
-    flex-basis: 90%;
+    flex-basis: calc(90% - var(--units-gap, 1rem) * 0.1);
   }
   .container-small-desktop-unit-88 {
-    max-width: 87.5%;
-    flex-basis: 87.5%;
+    flex-basis: calc(87.5% - var(--units-gap, 1rem) * 0.12);
   }
   .container-small-desktop-unit-80 {
-    max-width: 80%;
-    flex-basis: 80%;
+    flex-basis: calc(80% - var(--units-gap, 1rem) * 0.2);
   }
   .container-small-desktop-unit-75 {
-    max-width: 75%;
-    flex-basis: 75%;
+    flex-basis: calc(75% - var(--units-gap, 1rem) * 0.25);
   }
   .container-small-desktop-unit-70 {
-    max-width: 70%;
-    flex-basis: 70%;
+    flex-basis: calc(70% - var(--units-gap, 1rem) * 0.3);
   }
   .container-small-desktop-unit-66 {
-    max-width: 66.6%;
-    flex-basis: 66.6%;
+    flex-basis: calc(66.6% - var(--units-gap, 1rem) * 0.34);
   }
   .container-small-desktop-unit-65 {
-    max-width: 65%;
-    flex-basis: 65%;
+    flex-basis: calc(65% - var(--units-gap, 1rem) * 0.35);
   }
   .container-small-desktop-unit-62 {
-    max-width: 62.5%;
-    flex-basis: 62.5%;
+    flex-basis: calc(62.5% - var(--units-gap, 1rem) * 0.38);
   }
   .container-small-desktop-unit-60 {
-    max-width: 60%;
-    flex-basis: 60%;
+    flex-basis: calc(60% - var(--units-gap, 1rem) * 0.4);
   }
   .container-small-desktop-unit-50 {
-    max-width: 50%;
-    flex-basis: 50%;
+    flex-basis: calc(50% - var(--units-gap, 1rem) * 0.5);
   }
   .container-small-desktop-unit-40 {
-    max-width: 40%;
-    flex-basis: 40%;
+    flex-basis: calc(40% - var(--units-gap, 1rem) * 0.6);
   }
   .container-small-desktop-unit-38 {
-    max-width: 37.5%;
-    flex-basis: 37.5%;
+    flex-basis: calc(37.5% - var(--units-gap, 1rem) * 0.62);
   }
   .container-small-desktop-unit-35 {
-    max-width: 35%;
-    flex-basis: 35%;
+    flex-basis: calc(35% - var(--units-gap, 1rem) * 0.65);
   }
   .container-small-desktop-unit-33 {
-    max-width: 33.3%;
-    flex-basis: 33.3%;
+    flex-basis: calc(33.3% - var(--units-gap, 1rem) * 0.67);
   }
   .container-small-desktop-unit-30 {
-    max-width: 30%;
-    flex-basis: 30%;
+    flex-basis: calc(30% - var(--units-gap, 1rem) * 0.7);
   }
   .container-small-desktop-unit-25 {
-    max-width: 25%;
-    flex-basis: 25%;
+    flex-basis: calc(25% - var(--units-gap, 1rem) * 0.75);
   }
   .container-small-desktop-unit-20 {
-    max-width: 20%;
-    flex-basis: 20%;
+    flex-basis: calc(20% - var(--units-gap, 1rem) * 0.8);
   }
   .container-small-desktop-unit-12 {
-    max-width: 12.5%;
-    flex-basis: 12.5%;
+    flex-basis: calc(12.5% - var(--units-gap, 1rem) * 0.88);
   }
   .container-small-desktop-unit-10 {
-    max-width: 10%;
-    flex-basis: 10%;
+    flex-basis: calc(10% - var(--units-gap, 1rem) * 0.9);
   }
   .container-small-desktop-unit-auto {
     flex-basis: 0;