scu-web-components 0.0.36 → 0.0.37

package/dist/tokens/css.html

@@ -22,7 +22,7 @@
 			const clipboardType = urlParams.get('clipboardType');
 
 			import run from './apps/cheatsheet/main.js';
-			run('.', import.meta, '0.7.16', '../example/dist/tokens', clipboardType );
+			run('.', import.meta, '0.7.22', '../example/dist/tokens', clipboardType );
 		</script>
 
 		<style>
@@ -52,7 +52,7 @@
 		<div id="main"></div>
 
 		<div id="main-loading">
-			Loading Summit Tokenizer Cheatsheet 0.7.16
+			Loading Summit Tokenizer Cheatsheet 0.7.22
 		</div>
 
   </body>

package/dist/tokens/segments/comp-scw-alert/_description-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 198.5px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -43,7 +43,7 @@
   margin-left: calc( var( --scw-spacing-1 ) * 22.15 );
   margin-right: calc( var( --scw-spacing-1 ) * 2.2 );
   margin-top: var( --scw-spacing-1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }
 
 @mixin html-autolayout-padding {
@@ -51,5 +51,5 @@
   padding-left: calc( var( --scw-spacing-1 ) * 22.15 );
   padding-right: calc( var( --scw-spacing-1 ) * 2.2 );
   padding-top: var( --scw-spacing-1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }

package/dist/tokens/segments/comp-scw-alert/_description-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-error-dark );
 $font-family: 'Proxima Nova';
 $font-weight: 400;
-$line-height: 1.218rem;
+$line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-font );
 $width: 198.5px;
-$height: 19px;
+$height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -24,8 +24,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 1;
 $top: var( --scw-spacing-1 );
-$top-percent: 48.75%;
-$bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+$top-percent: 55%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 $left: calc( var( --scw-spacing-1 ) * 22.15 );
 $left-percent: 72.57%;
 $right: calc( var( --scw-spacing-1 ) * 2.2 );

package/dist/tokens/segments/comp-scw-alert/_message-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 402px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -43,7 +43,7 @@
   margin-left: var( --scw-spacing-2 );
   margin-right: var( --scw-spacing-2 );
   margin-top: var( --scw-spacing-1 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }
 
 @mixin html-autolayout-padding {
@@ -51,5 +51,5 @@
   padding-left: var( --scw-spacing-2 );
   padding-right: var( --scw-spacing-2 );
   padding-top: var( --scw-spacing-1 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 }

package/dist/tokens/segments/comp-scw-alert/_message-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-error-dark );
 $font-family: 'Proxima Nova';
 $font-weight: 700;
-$line-height: 1.218rem;
+$line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-bold-font );
 $width: 402px;
-$height: 19px;
+$height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -24,8 +24,8 @@ $item-spacing: 0px;
 $layout-align: INHERIT;
 $layout-grow: 1;
 $top: var( --scw-spacing-1 );
-$top-percent: 48.75%;
-$bottom: calc( var( --scw-spacing-1 ) * 1.1 );
+$top-percent: 55%;
+$bottom: calc( var( --scw-spacing-1 ) * 0.6 );
 $left: var( --scw-spacing-2 );
 $left-percent: 50%;
 $right: var( --scw-spacing-2 );

package/dist/tokens/segments/comp-scw-card/_color-checking-action-mixins.scss

@@ -15,7 +15,7 @@
 
 @mixin sizing {
   width: 83px;
-  height: 32px;
+  height: 37px;
 }
 
 @mixin width {
@@ -23,7 +23,7 @@
 }
 
 @mixin height {
-  height: 32px;
+  height: 37px;
 }
 
 @mixin padding {
@@ -56,7 +56,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 44.2 );
   margin-bottom: 0px;
 }
 
@@ -64,6 +64,6 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 44.2 );
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-action-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 6px;
 $corner-radius-bottom-right: 6px;
 $corner-radius-bottom-left: 6px;
 $width: 83px;
-$height: 32px;
+$height: 37px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -18,8 +18,8 @@ $counter-axis-align-items: CENTER;
 $item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
 $layout-align: INHERIT;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 44.7 );
-$top-percent: 96.66%;
+$top: calc( var( --scw-spacing-1 ) * 44.2 );
+$top-percent: 96.14%;
 $bottom: 0px;
 $left: 0px;
 $left-percent: 6.53%;

package/dist/tokens/segments/comp-scw-card/_color-checking-description-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 26px;
+  height: 27px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 26px;
+  height: 27px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  margin-bottom: var( --scw-spacing-4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  padding-bottom: var( --scw-spacing-4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-description-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-grey-02 );
 $font-family: 'Proxima Nova';
 $font-weight: 400;
-$line-height: 1.625rem;
+$line-height: 1.688rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-06-font );
 $width: 636px;
-$height: 26px;
+$height: 27px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -23,9 +23,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 41.3 );
-$top-percent: 88.94%;
-$bottom: var( --scw-spacing-4 );
+$top: calc( var( --scw-spacing-1 ) * 40.7 );
+$top-percent: 87.79%;
+$bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-checking-heading-mixins.scss

@@ -45,14 +45,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 37 );
+  margin-bottom: var( --scw-spacing-8 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 37 );
+  padding-bottom: var( --scw-spacing-8 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-heading-vars.scss

@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 37.6 );
-$top-percent: 81.52%;
-$bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+$top: calc( var( --scw-spacing-1 ) * 37 );
+$top-percent: 80.27%;
+$bottom: var( --scw-spacing-8 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-checking-image-mixins.scss

@@ -17,7 +17,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 341px;
+  height: 330px;
 }
 
 @mixin width {
@@ -25,7 +25,7 @@
 }
 
 @mixin height {
-  height: 341px;
+  height: 330px;
 }
 
 @mixin padding {
@@ -59,7 +59,7 @@
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }
 
 @mixin html-autolayout-padding {
@@ -67,5 +67,5 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-image-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 10px;
 $corner-radius-bottom-right: 10px;
 $corner-radius-bottom-left: 10px;
 $width: 636px;
-$height: 341px;
+$height: 330px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -19,8 +19,8 @@ $item-spacing: calc( var( --scw-spacing-1 ) * 0.8 );
 $layout-align: STRETCH;
 $layout-grow: 1;
 $top: 0px;
-$top-percent: 35.59%;
-$bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+$top-percent: 34.45%;
+$bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-checking-super-heading-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+  margin-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+  padding-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 }

package/dist/tokens/segments/comp-scw-card/_color-checking-super-heading-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-checking-04 );
 $font-family: 'Proxima Nova Condensed';
 $font-weight: 700;
-$line-height: 1.218rem;
+$line-height: 1.5rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-bold-condensed-font );
 $width: 636px;
-$height: 19px;
+$height: 24px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -23,9 +23,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 34.9 );
-$top-percent: 74.84%;
-$bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+$top: calc( var( --scw-spacing-1 ) * 33.8 );
+$top-percent: 73.07%;
+$bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-action-mixins.scss

@@ -15,7 +15,7 @@
 
 @mixin sizing {
   width: 83px;
-  height: 32px;
+  height: 37px;
 }
 
 @mixin width {
@@ -23,7 +23,7 @@
 }
 
 @mixin height {
-  height: 32px;
+  height: 37px;
 }
 
 @mixin padding {
@@ -56,7 +56,7 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  margin-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 44.2 );
   margin-bottom: 0px;
 }
 
@@ -64,6 +64,6 @@
   display: inline-block;
   padding-left: 0px;
   padding-right: calc( var( --scw-spacing-1 ) * 55.3 );
-  padding-top: calc( var( --scw-spacing-1 ) * 44.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 44.2 );
   padding-bottom: 0px;
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-action-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 6px;
 $corner-radius-bottom-right: 6px;
 $corner-radius-bottom-left: 6px;
 $width: 83px;
-$height: 32px;
+$height: 37px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -18,8 +18,8 @@ $counter-axis-align-items: CENTER;
 $item-spacing: calc( var( --scw-spacing-1 ) * 0.4 );
 $layout-align: INHERIT;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 44.7 );
-$top-percent: 96.66%;
+$top: calc( var( --scw-spacing-1 ) * 44.2 );
+$top-percent: 96.14%;
 $bottom: 0px;
 $left: 0px;
 $left-percent: 6.53%;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-description-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 26px;
+  height: 27px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 26px;
+  height: 27px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  margin-bottom: var( --scw-spacing-4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 41.3 );
-  padding-bottom: var( --scw-spacing-4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 40.7 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-description-vars.scss

@@ -8,11 +8,11 @@ $text-transform: none;
 $color: var( --scw-color-grey-02 );
 $font-family: 'Proxima Nova';
 $font-weight: 400;
-$line-height: 1.625rem;
+$line-height: 1.688rem;
 $letter-spacing: 0rem;
 $font: var( --scw-type-text-06-font );
 $width: 636px;
-$height: 26px;
+$height: 27px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -23,9 +23,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 41.3 );
-$top-percent: 88.94%;
-$bottom: var( --scw-spacing-4 );
+$top: calc( var( --scw-spacing-1 ) * 40.7 );
+$top-percent: 87.79%;
+$bottom: calc( var( --scw-spacing-1 ) * 4.5 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-heading-mixins.scss

@@ -45,14 +45,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  margin-top: calc( var( --scw-spacing-1 ) * 37 );
+  margin-bottom: var( --scw-spacing-8 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 37.6 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+  padding-top: calc( var( --scw-spacing-1 ) * 37 );
+  padding-bottom: var( --scw-spacing-8 );
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-heading-vars.scss

@@ -13,9 +13,9 @@ $counter-axis-align-items: MIN;
 $item-spacing: 0px;
 $layout-align: STRETCH;
 $layout-grow: 0;
-$top: calc( var( --scw-spacing-1 ) * 37.6 );
-$top-percent: 81.52%;
-$bottom: calc( var( --scw-spacing-1 ) * 7.4 );
+$top: calc( var( --scw-spacing-1 ) * 37 );
+$top-percent: 80.27%;
+$bottom: var( --scw-spacing-8 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-image-mixins.scss

@@ -17,7 +17,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 341px;
+  height: 330px;
 }
 
 @mixin width {
@@ -25,7 +25,7 @@
 }
 
 @mixin height {
-  height: 341px;
+  height: 330px;
 }
 
 @mixin padding {
@@ -59,7 +59,7 @@
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0px;
-  margin-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }
 
 @mixin html-autolayout-padding {
@@ -67,5 +67,5 @@
   padding-left: 0px;
   padding-right: 0px;
   padding-top: 0px;
-  padding-bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 }

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-image-vars.scss

@@ -7,7 +7,7 @@ $corner-radius-top-right: 10px;
 $corner-radius-bottom-right: 10px;
 $corner-radius-bottom-left: 10px;
 $width: 636px;
-$height: 341px;
+$height: 330px;
 $constraint-horizontal: MIN;
 $constraint-vertical: MIN;
 $constrain-proportions: false;
@@ -19,8 +19,8 @@ $item-spacing: calc( var( --scw-spacing-1 ) * 0.8 );
 $layout-align: STRETCH;
 $layout-grow: 1;
 $top: 0px;
-$top-percent: 35.59%;
-$bottom: calc( var( --scw-spacing-1 ) * 13.8 );
+$top-percent: 34.45%;
+$bottom: calc( var( --scw-spacing-1 ) * 14.9 );
 $left: 0px;
 $left-percent: 50%;
 $right: 0px;

package/dist/tokens/segments/comp-scw-card/_color-credit-cards-super-heading-mixins.scss

@@ -16,7 +16,7 @@
 
 @mixin sizing {
   width: 636px;
-  height: 19px;
+  height: 24px;
 }
 
 @mixin width {
@@ -24,7 +24,7 @@
 }
 
 @mixin height {
-  height: 19px;
+  height: 24px;
 }
 
 @mixin padding {
@@ -42,14 +42,14 @@
   display: inline-block;
   margin-left: 0px;
   margin-right: 0px;
-  margin-top: calc( var( --scw-spacing-1 ) * 34.9 );
-  margin-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+  margin-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 }
 
 @mixin html-autolayout-padding {
   display: inline-block;
   padding-left: 0px;
   padding-right: 0px;
-  padding-top: calc( var( --scw-spacing-1 ) * 34.9 );
-  padding-bottom: calc( var( --scw-spacing-1 ) * 11.1 );
+  padding-top: calc( var( --scw-spacing-1 ) * 33.8 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 11.7 );
 }