@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/src/styles/less/neptune-addons.css

@@ -1,10 +1,13 @@
 .bg-default,
 .bg-neutral {
+  background-color: rgba(134,167,189,0.10196) !important;
   background-color: var(--color-background-neutral) !important;
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .bg-accent,
 .bg-info {
+  background-color: rgba(56,200,255,0.10196) !important;
   background-color: var(--color-background-accent) !important;
 }
 .bg-primary {
@@ -13,22 +16,28 @@
 }
 .bg-positive,
 .bg-success {
+  background-color: rgba(54,199,151,0.10196) !important;
   background-color: var(--color-background-positive) !important;
 }
 .bg-negative,
 .bg-danger {
+  background-color: rgba(255,135,135,0.10196) !important;
   background-color: var(--color-background-negative) !important;
 }
 .bg-warning {
+  background-color: rgba(255,172,0,0.10196) !important;
   background-color: var(--color-background-warning) !important;
 }
 .bg-elevated {
+  background-color: #ffffff !important;
   background-color: var(--color-background-elevated) !important;
 }
 .bg-screen {
+  background-color: #ffffff !important;
   background-color: var(--color-background-screen) !important;
 }
 .bg-overlay {
+  background-color: rgba(0,0,0,0.10196) !important;
   background-color: var(--color-background-overlay) !important;
 }
 .bg-primary h1,
@@ -97,21 +106,6 @@
 .bg-primary .np-text-title-group,
 .bg-info .np-text-title-group,
 .bg-accent .np-text-title-group,
-.bg-primary .wds-text-title-screen,
-.bg-info .wds-text-title-screen,
-.bg-accent .wds-text-title-screen,
-.bg-primary .wds-text-title-section,
-.bg-info .wds-text-title-section,
-.bg-accent .wds-text-title-section,
-.bg-primary .wds-text-title-subsection,
-.bg-info .wds-text-title-subsection,
-.bg-accent .wds-text-title-subsection,
-.bg-primary .wds-text-title-body,
-.bg-info .wds-text-title-body,
-.bg-accent .wds-text-title-body,
-.bg-primary .wds-text-title-group,
-.bg-info .wds-text-title-group,
-.bg-accent .wds-text-title-group,
 .bg-primary strong,
 .bg-info strong,
 .bg-accent strong {
@@ -290,665 +284,946 @@
   padding-inline-end: 0 !important;
 }
 .m-a-1 {
+  margin-block-start: 8px !important;
   margin-block-start: var(--size-8) !important;
+  margin-inline-end: 8px !important;
   margin-inline-end: var(--size-8) !important;
+  margin-block-end: 8px !important;
   margin-block-end: var(--size-8) !important;
+  margin-inline-start: 8px !important;
   margin-inline-start: var(--size-8) !important;
 }
 .p-a-1 {
+  padding-block-start: 8px !important;
   padding-block-start: var(--size-8) !important;
+  padding-inline-end: 8px !important;
   padding-inline-end: var(--size-8) !important;
+  padding-block-end: 8px !important;
   padding-block-end: var(--size-8) !important;
+  padding-inline-start: 8px !important;
   padding-inline-start: var(--size-8) !important;
 }
 .m-t-1 {
+  margin-block-start: 8px !important;
   margin-block-start: var(--size-8) !important;
 }
 .m-b-1 {
+  margin-block-end: 8px !important;
   margin-block-end: var(--size-8) !important;
 }
 .m-y-1 {
+  margin-block-start: 8px !important;
   margin-block-start: var(--size-8) !important;
+  margin-block-end: 8px !important;
   margin-block-end: var(--size-8) !important;
 }
 .p-t-1 {
+  padding-block-start: 8px !important;
   padding-block-start: var(--size-8) !important;
 }
 .p-b-1 {
+  padding-block-end: 8px !important;
   padding-block-end: var(--size-8) !important;
 }
 .p-y-1 {
+  padding-block-start: 8px !important;
   padding-block-start: var(--size-8) !important;
+  padding-block-end: 8px !important;
   padding-block-end: var(--size-8) !important;
 }
 .m-l-1 {
+  margin-inline-start: 8px !important;
   margin-inline-start: var(--size-8) !important;
 }
 .m-r-1 {
+  margin-inline-end: 8px !important;
   margin-inline-end: var(--size-8) !important;
 }
 .m-x-1 {
+  margin-inline-start: 8px !important;
   margin-inline-start: var(--size-8) !important;
+  margin-inline-end: 8px !important;
   margin-inline-end: var(--size-8) !important;
 }
 .p-l-1 {
+  padding-inline-start: 8px !important;
   padding-inline-start: var(--size-8) !important;
 }
 .p-r-1 {
+  padding-inline-end: 8px !important;
   padding-inline-end: var(--size-8) !important;
 }
 .p-x-1 {
+  padding-inline-start: 8px !important;
   padding-inline-start: var(--size-8) !important;
+  padding-inline-end: 8px !important;
   padding-inline-end: var(--size-8) !important;
 }
 .m-a-2 {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
+  margin-inline-end: 16px !important;
   margin-inline-end: var(--size-16) !important;
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
+  margin-inline-start: 16px !important;
   margin-inline-start: var(--size-16) !important;
 }
 .p-a-2 {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
+  padding-inline-end: 16px !important;
   padding-inline-end: var(--size-16) !important;
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
+  padding-inline-start: 16px !important;
   padding-inline-start: var(--size-16) !important;
 }
 .m-t-2 {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
 }
 .m-b-2 {
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
 }
 .m-y-2 {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
 }
 .p-t-2 {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
 }
 .p-b-2 {
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
 }
 .p-y-2 {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
 }
 .m-l-2 {
+  margin-inline-start: 16px !important;
   margin-inline-start: var(--size-16) !important;
 }
 .m-r-2 {
+  margin-inline-end: 16px !important;
   margin-inline-end: var(--size-16) !important;
 }
 .m-x-2 {
+  margin-inline-start: 16px !important;
   margin-inline-start: var(--size-16) !important;
+  margin-inline-end: 16px !important;
   margin-inline-end: var(--size-16) !important;
 }
 .p-l-2 {
+  padding-inline-start: 16px !important;
   padding-inline-start: var(--size-16) !important;
 }
 .p-r-2 {
+  padding-inline-end: 16px !important;
   padding-inline-end: var(--size-16) !important;
 }
 .p-x-2 {
+  padding-inline-start: 16px !important;
   padding-inline-start: var(--size-16) !important;
+  padding-inline-end: 16px !important;
   padding-inline-end: var(--size-16) !important;
 }
 .m-a-3 {
+  margin-block-start: 24px !important;
   margin-block-start: var(--size-24) !important;
+  margin-inline-end: 24px !important;
   margin-inline-end: var(--size-24) !important;
+  margin-block-end: 24px !important;
   margin-block-end: var(--size-24) !important;
+  margin-inline-start: 24px !important;
   margin-inline-start: var(--size-24) !important;
 }
 .p-a-3 {
+  padding-block-start: 24px !important;
   padding-block-start: var(--size-24) !important;
+  padding-inline-end: 24px !important;
   padding-inline-end: var(--size-24) !important;
+  padding-block-end: 24px !important;
   padding-block-end: var(--size-24) !important;
+  padding-inline-start: 24px !important;
   padding-inline-start: var(--size-24) !important;
 }
 .m-t-3 {
+  margin-block-start: 24px !important;
   margin-block-start: var(--size-24) !important;
 }
 .m-b-3 {
+  margin-block-end: 24px !important;
   margin-block-end: var(--size-24) !important;
 }
 .m-y-3 {
+  margin-block-start: 24px !important;
   margin-block-start: var(--size-24) !important;
+  margin-block-end: 24px !important;
   margin-block-end: var(--size-24) !important;
 }
 .p-t-3 {
+  padding-block-start: 24px !important;
   padding-block-start: var(--size-24) !important;
 }
 .p-b-3 {
+  padding-block-end: 24px !important;
   padding-block-end: var(--size-24) !important;
 }
 .p-y-3 {
+  padding-block-start: 24px !important;
   padding-block-start: var(--size-24) !important;
+  padding-block-end: 24px !important;
   padding-block-end: var(--size-24) !important;
 }
 .m-l-3 {
+  margin-inline-start: 24px !important;
   margin-inline-start: var(--size-24) !important;
 }
 .m-r-3 {
+  margin-inline-end: 24px !important;
   margin-inline-end: var(--size-24) !important;
 }
 .m-x-3 {
+  margin-inline-start: 24px !important;
   margin-inline-start: var(--size-24) !important;
+  margin-inline-end: 24px !important;
   margin-inline-end: var(--size-24) !important;
 }
 .p-l-3 {
+  padding-inline-start: 24px !important;
   padding-inline-start: var(--size-24) !important;
 }
 .p-r-3 {
+  padding-inline-end: 24px !important;
   padding-inline-end: var(--size-24) !important;
 }
 .p-x-3 {
+  padding-inline-start: 24px !important;
   padding-inline-start: var(--size-24) !important;
+  padding-inline-end: 24px !important;
   padding-inline-end: var(--size-24) !important;
 }
 .m-a-4 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
+  margin-inline-end: 32px !important;
   margin-inline-end: var(--size-32) !important;
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
+  margin-inline-start: 32px !important;
   margin-inline-start: var(--size-32) !important;
 }
 .p-a-4 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
+  padding-inline-end: 32px !important;
   padding-inline-end: var(--size-32) !important;
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
+  padding-inline-start: 32px !important;
   padding-inline-start: var(--size-32) !important;
 }
 .m-t-4 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
 }
 .m-b-4 {
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
 }
 .m-y-4 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
 }
 .p-t-4 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
 }
 .p-b-4 {
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
 }
 .p-y-4 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
 }
 .m-l-4 {
+  margin-inline-start: 32px !important;
   margin-inline-start: var(--size-32) !important;
 }
 .m-r-4 {
+  margin-inline-end: 32px !important;
   margin-inline-end: var(--size-32) !important;
 }
 .m-x-4 {
+  margin-inline-start: 32px !important;
   margin-inline-start: var(--size-32) !important;
+  margin-inline-end: 32px !important;
   margin-inline-end: var(--size-32) !important;
 }
 .p-l-4 {
+  padding-inline-start: 32px !important;
   padding-inline-start: var(--size-32) !important;
 }
 .p-r-4 {
+  padding-inline-end: 32px !important;
   padding-inline-end: var(--size-32) !important;
 }
 .p-x-4 {
+  padding-inline-start: 32px !important;
   padding-inline-start: var(--size-32) !important;
+  padding-inline-end: 32px !important;
   padding-inline-end: var(--size-32) !important;
 }
 .m-a-5 {
+  margin-block-start: 40px !important;
   margin-block-start: var(--size-40) !important;
+  margin-inline-end: 40px !important;
   margin-inline-end: var(--size-40) !important;
+  margin-block-end: 40px !important;
   margin-block-end: var(--size-40) !important;
+  margin-inline-start: 40px !important;
   margin-inline-start: var(--size-40) !important;
 }
 .p-a-5 {
+  padding-block-start: 40px !important;
   padding-block-start: var(--size-40) !important;
+  padding-inline-end: 40px !important;
   padding-inline-end: var(--size-40) !important;
+  padding-block-end: 40px !important;
   padding-block-end: var(--size-40) !important;
+  padding-inline-start: 40px !important;
   padding-inline-start: var(--size-40) !important;
 }
 .m-t-5 {
+  margin-block-start: 40px !important;
   margin-block-start: var(--size-40) !important;
 }
 .m-b-5 {
+  margin-block-end: 40px !important;
   margin-block-end: var(--size-40) !important;
 }
 .m-y-5 {
+  margin-block-start: 40px !important;
   margin-block-start: var(--size-40) !important;
+  margin-block-end: 40px !important;
   margin-block-end: var(--size-40) !important;
 }
 .p-t-5 {
+  padding-block-start: 40px !important;
   padding-block-start: var(--size-40) !important;
 }
 .p-b-5 {
+  padding-block-end: 40px !important;
   padding-block-end: var(--size-40) !important;
 }
 .p-y-5 {
+  padding-block-start: 40px !important;
   padding-block-start: var(--size-40) !important;
+  padding-block-end: 40px !important;
   padding-block-end: var(--size-40) !important;
 }
 .m-l-5 {
+  margin-inline-start: 40px !important;
   margin-inline-start: var(--size-40) !important;
 }
 .m-r-5 {
+  margin-inline-end: 40px !important;
   margin-inline-end: var(--size-40) !important;
 }
 .m-x-5 {
+  margin-inline-start: 40px !important;
   margin-inline-start: var(--size-40) !important;
+  margin-inline-end: 40px !important;
   margin-inline-end: var(--size-40) !important;
 }
 .p-l-5 {
+  padding-inline-start: 40px !important;
   padding-inline-start: var(--size-40) !important;
 }
 .p-r-5 {
+  padding-inline-end: 40px !important;
   padding-inline-end: var(--size-40) !important;
 }
 .p-x-5 {
+  padding-inline-start: 40px !important;
   padding-inline-start: var(--size-40) !important;
+  padding-inline-end: 40px !important;
   padding-inline-end: var(--size-40) !important;
 }
 .m-t-4 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
 }
 .m-b-4 {
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
 }
 .m-y-4 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
 }
 .p-t-4 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
 }
 .p-b-4 {
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
 }
 .p-y-4 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
 }
 .m-t-5 {
+  margin-block-start: 40px !important;
   margin-block-start: var(--size-40) !important;
 }
 .m-b-5 {
+  margin-block-end: 40px !important;
   margin-block-end: var(--size-40) !important;
 }
 .m-y-5 {
+  margin-block-start: 40px !important;
   margin-block-start: var(--size-40) !important;
+  margin-block-end: 40px !important;
   margin-block-end: var(--size-40) !important;
 }
 .p-t-5 {
+  padding-block-start: 40px !important;
   padding-block-start: var(--size-40) !important;
 }
 .p-b-5 {
+  padding-block-end: 40px !important;
   padding-block-end: var(--size-40) !important;
 }
 .p-y-5 {
+  padding-block-start: 40px !important;
   padding-block-start: var(--size-40) !important;
+  padding-block-end: 40px !important;
   padding-block-end: var(--size-40) !important;
 }
 .gap-y-1 {
+  row-gap: 8px;
   row-gap: var(--size-8);
 }
 .m-a-panel {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
+  margin-inline-end: 16px !important;
   margin-inline-end: var(--size-16) !important;
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
+  margin-inline-start: 16px !important;
   margin-inline-start: var(--size-16) !important;
 }
 .p-a-panel {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
+  padding-inline-end: 16px !important;
   padding-inline-end: var(--size-16) !important;
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
+  padding-inline-start: 16px !important;
   padding-inline-start: var(--size-16) !important;
 }
 @media (min-width: 600px) {
   .m-a-panel {
+    margin-block-start: 24px !important;
     margin-block-start: var(--size-24) !important;
+    margin-inline-end: 24px !important;
     margin-inline-end: var(--size-24) !important;
+    margin-block-end: 24px !important;
     margin-block-end: var(--size-24) !important;
+    margin-inline-start: 24px !important;
     margin-inline-start: var(--size-24) !important;
   }
   .p-a-panel {
+    padding-block-start: 24px !important;
     padding-block-start: var(--size-24) !important;
+    padding-inline-end: 24px !important;
     padding-inline-end: var(--size-24) !important;
+    padding-block-end: 24px !important;
     padding-block-end: var(--size-24) !important;
+    padding-inline-start: 24px !important;
     padding-inline-start: var(--size-24) !important;
   }
 }
 @media (min-width: 1160px) {
   .m-a-panel {
+    margin-block-start: 32px !important;
     margin-block-start: var(--size-32) !important;
+    margin-inline-end: 32px !important;
     margin-inline-end: var(--size-32) !important;
+    margin-block-end: 32px !important;
     margin-block-end: var(--size-32) !important;
+    margin-inline-start: 32px !important;
     margin-inline-start: var(--size-32) !important;
   }
   .p-a-panel {
+    padding-block-start: 32px !important;
     padding-block-start: var(--size-32) !important;
+    padding-inline-end: 32px !important;
     padding-inline-end: var(--size-32) !important;
+    padding-block-end: 32px !important;
     padding-block-end: var(--size-32) !important;
+    padding-inline-start: 32px !important;
     padding-inline-start: var(--size-32) !important;
   }
 }
 .m-t-panel {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
 }
 .m-b-panel {
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
 }
 .m-y-panel {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
 }
 .p-t-panel {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
 }
 .p-b-panel {
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
 }
 .p-y-panel {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
 }
 @media (min-width: 600px) {
   .m-t-panel {
+    margin-block-start: 24px !important;
     margin-block-start: var(--size-24) !important;
   }
   .m-b-panel {
+    margin-block-end: 24px !important;
     margin-block-end: var(--size-24) !important;
   }
   .m-y-panel {
+    margin-block-start: 24px !important;
     margin-block-start: var(--size-24) !important;
+    margin-block-end: 24px !important;
     margin-block-end: var(--size-24) !important;
   }
   .p-t-panel {
+    padding-block-start: 24px !important;
     padding-block-start: var(--size-24) !important;
   }
   .p-b-panel {
+    padding-block-end: 24px !important;
     padding-block-end: var(--size-24) !important;
   }
   .p-y-panel {
+    padding-block-start: 24px !important;
     padding-block-start: var(--size-24) !important;
+    padding-block-end: 24px !important;
     padding-block-end: var(--size-24) !important;
   }
 }
 @media (min-width: 1160px) {
   .m-t-panel {
+    margin-block-start: 32px !important;
     margin-block-start: var(--size-32) !important;
   }
   .m-b-panel {
+    margin-block-end: 32px !important;
     margin-block-end: var(--size-32) !important;
   }
   .m-y-panel {
+    margin-block-start: 32px !important;
     margin-block-start: var(--size-32) !important;
+    margin-block-end: 32px !important;
     margin-block-end: var(--size-32) !important;
   }
   .p-t-panel {
+    padding-block-start: 32px !important;
     padding-block-start: var(--size-32) !important;
   }
   .p-b-panel {
+    padding-block-end: 32px !important;
     padding-block-end: var(--size-32) !important;
   }
   .p-y-panel {
+    padding-block-start: 32px !important;
     padding-block-start: var(--size-32) !important;
+    padding-block-end: 32px !important;
     padding-block-end: var(--size-32) !important;
   }
 }
 .m-l-panel {
+  margin-inline-start: 16px !important;
   margin-inline-start: var(--size-16) !important;
 }
 .m-r-panel {
+  margin-inline-end: 16px !important;
   margin-inline-end: var(--size-16) !important;
 }
 .m-x-panel {
+  margin-inline-start: 16px !important;
   margin-inline-start: var(--size-16) !important;
+  margin-inline-end: 16px !important;
   margin-inline-end: var(--size-16) !important;
 }
 .p-l-panel {
+  padding-inline-start: 16px !important;
   padding-inline-start: var(--size-16) !important;
 }
 .p-r-panel {
+  padding-inline-end: 16px !important;
   padding-inline-end: var(--size-16) !important;
 }
 .p-x-panel {
+  padding-inline-start: 16px !important;
   padding-inline-start: var(--size-16) !important;
+  padding-inline-end: 16px !important;
   padding-inline-end: var(--size-16) !important;
 }
 @media (min-width: 600px) {
   .m-l-panel {
+    margin-inline-start: 24px !important;
     margin-inline-start: var(--size-24) !important;
   }
   .m-r-panel {
+    margin-inline-end: 24px !important;
     margin-inline-end: var(--size-24) !important;
   }
   .m-x-panel {
+    margin-inline-start: 24px !important;
     margin-inline-start: var(--size-24) !important;
+    margin-inline-end: 24px !important;
     margin-inline-end: var(--size-24) !important;
   }
   .p-l-panel {
+    padding-inline-start: 24px !important;
     padding-inline-start: var(--size-24) !important;
   }
   .p-r-panel {
+    padding-inline-end: 24px !important;
     padding-inline-end: var(--size-24) !important;
   }
   .p-x-panel {
+    padding-inline-start: 24px !important;
     padding-inline-start: var(--size-24) !important;
+    padding-inline-end: 24px !important;
     padding-inline-end: var(--size-24) !important;
   }
 }
 @media (min-width: 1160px) {
   .m-l-panel {
+    margin-inline-start: 32px !important;
     margin-inline-start: var(--size-32) !important;
   }
   .m-r-panel {
+    margin-inline-end: 32px !important;
     margin-inline-end: var(--size-32) !important;
   }
   .m-x-panel {
+    margin-inline-start: 32px !important;
     margin-inline-start: var(--size-32) !important;
+    margin-inline-end: 32px !important;
     margin-inline-end: var(--size-32) !important;
   }
   .p-l-panel {
+    padding-inline-start: 32px !important;
     padding-inline-start: var(--size-32) !important;
   }
   .p-r-panel {
+    padding-inline-end: 32px !important;
     padding-inline-end: var(--size-32) !important;
   }
   .p-x-panel {
+    padding-inline-start: 32px !important;
     padding-inline-start: var(--size-32) !important;
+    padding-inline-end: 32px !important;
     padding-inline-end: var(--size-32) !important;
   }
 }
 .m-t-section-1 {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
 }
 .m-b-section-1 {
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
 }
 .m-y-section-1 {
+  margin-block-start: 16px !important;
   margin-block-start: var(--size-16) !important;
+  margin-block-end: 16px !important;
   margin-block-end: var(--size-16) !important;
 }
 .p-t-section-1 {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
 }
 .p-b-section-1 {
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
 }
 .p-y-section-1 {
+  padding-block-start: 16px !important;
   padding-block-start: var(--size-16) !important;
+  padding-block-end: 16px !important;
   padding-block-end: var(--size-16) !important;
 }
 @media (min-width: 600px) {
   .m-t-section-1 {
+    margin-block-start: 24px !important;
     margin-block-start: var(--size-24) !important;
   }
   .m-b-section-1 {
+    margin-block-end: 24px !important;
     margin-block-end: var(--size-24) !important;
   }
   .m-y-section-1 {
+    margin-block-start: 24px !important;
     margin-block-start: var(--size-24) !important;
+    margin-block-end: 24px !important;
     margin-block-end: var(--size-24) !important;
   }
   .p-t-section-1 {
+    padding-block-start: 24px !important;
     padding-block-start: var(--size-24) !important;
   }
   .p-b-section-1 {
+    padding-block-end: 24px !important;
     padding-block-end: var(--size-24) !important;
   }
   .p-y-section-1 {
+    padding-block-start: 24px !important;
     padding-block-start: var(--size-24) !important;
+    padding-block-end: 24px !important;
     padding-block-end: var(--size-24) !important;
   }
 }
 @media (min-width: 1160px) {
   .m-t-section-1 {
+    margin-block-start: 32px !important;
     margin-block-start: var(--size-32) !important;
   }
   .m-b-section-1 {
+    margin-block-end: 32px !important;
     margin-block-end: var(--size-32) !important;
   }
   .m-y-section-1 {
+    margin-block-start: 32px !important;
     margin-block-start: var(--size-32) !important;
+    margin-block-end: 32px !important;
     margin-block-end: var(--size-32) !important;
   }
   .p-t-section-1 {
+    padding-block-start: 32px !important;
     padding-block-start: var(--size-32) !important;
   }
   .p-b-section-1 {
+    padding-block-end: 32px !important;
     padding-block-end: var(--size-32) !important;
   }
   .p-y-section-1 {
+    padding-block-start: 32px !important;
     padding-block-start: var(--size-32) !important;
+    padding-block-end: 32px !important;
     padding-block-end: var(--size-32) !important;
   }
 }
 .m-t-section-2 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
 }
 .m-b-section-2 {
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
 }
 .m-y-section-2 {
+  margin-block-start: 32px !important;
   margin-block-start: var(--size-32) !important;
+  margin-block-end: 32px !important;
   margin-block-end: var(--size-32) !important;
 }
 .p-t-section-2 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
 }
 .p-b-section-2 {
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
 }
 .p-y-section-2 {
+  padding-block-start: 32px !important;
   padding-block-start: var(--size-32) !important;
+  padding-block-end: 32px !important;
   padding-block-end: var(--size-32) !important;
 }
 @media (min-width: 600px) {
   .m-t-section-2 {
+    margin-block-start: 48px !important;
     margin-block-start: var(--size-48) !important;
   }
   .m-b-section-2 {
+    margin-block-end: 48px !important;
     margin-block-end: var(--size-48) !important;
   }
   .m-y-section-2 {
+    margin-block-start: 48px !important;
     margin-block-start: var(--size-48) !important;
+    margin-block-end: 48px !important;
     margin-block-end: var(--size-48) !important;
   }
   .p-t-section-2 {
+    padding-block-start: 48px !important;
     padding-block-start: var(--size-48) !important;
   }
   .p-b-section-2 {
+    padding-block-end: 48px !important;
     padding-block-end: var(--size-48) !important;
   }
   .p-y-section-2 {
+    padding-block-start: 48px !important;
     padding-block-start: var(--size-48) !important;
+    padding-block-end: 48px !important;
     padding-block-end: var(--size-48) !important;
   }
 }
 @media (min-width: 1160px) {
   .m-t-section-2 {
+    margin-block-start: 64px !important;
     margin-block-start: var(--size-64) !important;
   }
   .m-b-section-2 {
+    margin-block-end: 64px !important;
     margin-block-end: var(--size-64) !important;
   }
   .m-y-section-2 {
+    margin-block-start: 64px !important;
     margin-block-start: var(--size-64) !important;
+    margin-block-end: 64px !important;
     margin-block-end: var(--size-64) !important;
   }
   .p-t-section-2 {
+    padding-block-start: 64px !important;
     padding-block-start: var(--size-64) !important;
   }
   .p-b-section-2 {
+    padding-block-end: 64px !important;
     padding-block-end: var(--size-64) !important;
   }
   .p-y-section-2 {
+    padding-block-start: 64px !important;
     padding-block-start: var(--size-64) !important;
+    padding-block-end: 64px !important;
     padding-block-end: var(--size-64) !important;
   }
 }
 .m-t-section-3 {
+  margin-block-start: 48px !important;
   margin-block-start: var(--size-48) !important;
 }
 .m-b-section-3 {
+  margin-block-end: 48px !important;
   margin-block-end: var(--size-48) !important;
 }
 .m-y-section-3 {
+  margin-block-start: 48px !important;
   margin-block-start: var(--size-48) !important;
+  margin-block-end: 48px !important;
   margin-block-end: var(--size-48) !important;
 }
 .p-t-section-3 {
+  padding-block-start: 48px !important;
   padding-block-start: var(--size-48) !important;
 }
 .p-b-section-3 {
+  padding-block-end: 48px !important;
   padding-block-end: var(--size-48) !important;
 }
 .p-y-section-3 {
+  padding-block-start: 48px !important;
   padding-block-start: var(--size-48) !important;
+  padding-block-end: 48px !important;
   padding-block-end: var(--size-48) !important;
 }
 @media (min-width: 600px) {
   .m-t-section-3 {
+    margin-block-start: 72px !important;
     margin-block-start: var(--size-72) !important;
   }
   .m-b-section-3 {
+    margin-block-end: 72px !important;
     margin-block-end: var(--size-72) !important;
   }
   .m-y-section-3 {
+    margin-block-start: 72px !important;
     margin-block-start: var(--size-72) !important;
+    margin-block-end: 72px !important;
     margin-block-end: var(--size-72) !important;
   }
   .p-t-section-3 {
+    padding-block-start: 72px !important;
     padding-block-start: var(--size-72) !important;
   }
   .p-b-section-3 {
+    padding-block-end: 72px !important;
     padding-block-end: var(--size-72) !important;
   }
   .p-y-section-3 {
+    padding-block-start: 72px !important;
     padding-block-start: var(--size-72) !important;
+    padding-block-end: 72px !important;
     padding-block-end: var(--size-72) !important;
   }
 }
 @media (min-width: 1160px) {
   .m-t-section-3 {
+    margin-block-start: 96px !important;
     margin-block-start: var(--size-96) !important;
   }
   .m-b-section-3 {
+    margin-block-end: 96px !important;
     margin-block-end: var(--size-96) !important;
   }
   .m-y-section-3 {
+    margin-block-start: 96px !important;
     margin-block-start: var(--size-96) !important;
+    margin-block-end: 96px !important;
     margin-block-end: var(--size-96) !important;
   }
   .p-t-section-3 {
+    padding-block-start: 96px !important;
     padding-block-start: var(--size-96) !important;
   }
   .p-b-section-3 {
+    padding-block-end: 96px !important;
     padding-block-end: var(--size-96) !important;
   }
   .p-y-section-3 {
+    padding-block-start: 96px !important;
     padding-block-start: var(--size-96) !important;
+    padding-block-end: 96px !important;
     padding-block-end: var(--size-96) !important;
   }
 }
@@ -963,18 +1238,24 @@
   margin-inline-start: auto !important;
 }
 .section {
+  padding-block-start: 48px;
   padding-block-start: var(--size-48);
+  padding-block-end: 48px;
   padding-block-end: var(--size-48);
 }
 @media (min-width: 600px) {
   .section {
+    padding-block-start: 72px;
     padding-block-start: var(--size-72);
+    padding-block-end: 72px;
     padding-block-end: var(--size-72);
   }
 }
 @media (min-width: 1160px) {
   .section {
+    padding-block-start: 96px;
     padding-block-start: var(--size-96);
+    padding-block-end: 96px;
     padding-block-end: var(--size-96);
   }
 }
@@ -1010,5 +1291,7 @@
   }
 }
 .border-bottom {
+  border-block-end: 1px solid rgba(134,167,189,0.10196);
+  border-block-end: 1px solid #86a7bd1a;
   border-block-end: 1px solid var(--color-background-neutral);
 }