scu-web-components 0.0.75 → 0.0.76

package/dist/tokens/source/componentScssMixins.scss

@@ -48809,9 +48809,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -49360,9 +49360,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -49912,9 +49912,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -50463,9 +50463,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -51014,9 +51014,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -51565,9 +51565,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -52117,9 +52117,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -52668,9 +52668,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -53218,9 +53218,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -53768,9 +53768,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -54318,9 +54318,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -54870,9 +54870,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -55420,9 +55420,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -55970,9 +55970,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -56520,9 +56520,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -57072,9 +57072,9 @@
   $borderThemeVar: false
 ) { 
   @if $bgThemeVar {
-    background-color: var( #{$bgThemeVar} , rgba(255,255,255,1) );
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
   } @else {
-    background-color: rgba(255,255,255,1);
+    background-color: rgba(0,0,0,0);
   } 
 }
 
@@ -66791,4 +66791,1917 @@
   padding-right: calc( var( --scw-spacing-1 ) * -3.5 );
   padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
   padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 5px 5px 5px 5px;
+  border-width: 1px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar} , rgba(151,71,255,1) );
+  } @else {
+    border-color: rgba(151,71,255,1);
+  } 
+}
+
+@mixin comp-scw-callout--sizing {
+  width: 465px;
+  height: 412px;
+}
+
+@mixin comp-scw-callout--width {
+  width: 465px;
+}
+
+@mixin comp-scw-callout--height {
+  height: 412px;
+}
+
+@mixin comp-scw-callout--padding {
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-2 );
+}
+
+@mixin comp-scw-callout--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: var( --scw-spacing-2 );
+  & > *:not(:last-child) { 
+        margin-bottom: var( --scw-spacing-2 ); 
+        --margin-bottom: var( --scw-spacing-2 ); 
+      } 
+}
+
+@mixin comp-scw-callout--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-default (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 10px 10px 10px 10px; 
+}
+
+@mixin comp-scw-callout-default--sizing {
+  width: 425px;
+  height: 176px;
+}
+
+@mixin comp-scw-callout-default--width {
+  width: 425px;
+}
+
+@mixin comp-scw-callout-default--height {
+  height: 176px;
+}
+
+@mixin comp-scw-callout-default--padding {
+  padding-left: var( --scw-spacing-3 );
+  padding-right: var( --scw-spacing-3 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: var( --scw-spacing-3 );
+}
+
+@mixin comp-scw-callout-default--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: var( --scw-spacing-3 );
+  padding-right: var( --scw-spacing-3 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: var( --scw-spacing-3 );
+  & > *:not(:last-child) { 
+        margin-bottom: 0px; 
+        --margin-bottom: 0px; 
+      } 
+}
+
+@mixin comp-scw-callout-default--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
+  margin-top: var( --scw-spacing-2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 21.6 );
+}
+
+@mixin comp-scw-callout-default--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: var( --scw-spacing-2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 21.6 );
+}
+
+
+@mixin comp-scw-callout-default-content (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-default-content--sizing {
+  width: 365px;
+  height: 116px;
+}
+
+@mixin comp-scw-callout-default-content--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-default-content--height {
+  height: 116px;
+}
+
+@mixin comp-scw-callout-default-content--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: var( --scw-spacing-1 ); 
+        --margin-bottom: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-callout-default-content--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-3 );
+  margin-right: var( --scw-spacing-3 );
+  margin-top: var( --scw-spacing-3 );
+  margin-bottom: var( --scw-spacing-3 );
+}
+
+@mixin comp-scw-callout-default-content--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-3 );
+  padding-right: var( --scw-spacing-3 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: var( --scw-spacing-3 );
+}
+
+
+@mixin comp-scw-callout-default-content-scw-base-heading (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--sizing {
+  width: 365px;
+  height: 32px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--height {
+  height: 32px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: 0px; 
+        --margin-right: 0px; 
+      } 
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+}
+
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-08-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
+  } @else {
+    color: var( --scw-color-primary-03 );
+  } 
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--sizing {
+  width: 365px;
+  height: 32px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--height {
+  height: 32px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-heading-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--sizing {
+  width: 365px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: 0px; 
+        --margin-right: 0px; 
+      } 
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 4.2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 4.2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+}
+
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  } 
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--sizing {
+  width: 365px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-scw-base-paragraph-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-default-content-links (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-default-content-links--sizing {
+  width: 174px;
+  height: 37px;
+}
+
+@mixin comp-scw-callout-default-content-links--width {
+  width: 174px;
+}
+
+@mixin comp-scw-callout-default-content-links--height {
+  height: 37px;
+}
+
+@mixin comp-scw-callout-default-content-links--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-2 ); 
+        --margin-right: var( --scw-spacing-2 ); 
+      } 
+}
+
+@mixin comp-scw-callout-default-content-links--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 19.1 );
+  margin-top: calc( var( --scw-spacing-1 ) * 7.9 );
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 19.1 );
+  padding-top: calc( var( --scw-spacing-1 ) * 7.9 );
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );
+  } @else {
+    background-color: var( --scw-color-primary-03 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--sizing {
+  width: 77px;
+  height: 37px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--width {
+  width: 77px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--height {
+  height: 37px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+      } 
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 9.7 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 9.7 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-1-label (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    color: var( --scw-color-grey-10 );
+  } 
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--sizing {
+  width: 45px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--width {
+  width: 45px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-1-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-2 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    background-color: var( --scw-color-grey-10 );
+  }
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+  } @else {
+    border-color: var( --scw-color-primary-04 );
+  } 
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--sizing {
+  width: 77px;
+  height: 37px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--width {
+  width: 77px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--height {
+  height: 37px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+      } 
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 9.7 );
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 9.7 );
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-2-label (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
+  } @else {
+    color: var( --scw-color-primary-03 );
+  } 
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--sizing {
+  width: 45px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--width {
+  width: 45px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-default-content-links-link-2-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-center (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-09 , var( --scw-color-primary-09 ) );
+  } @else {
+    background-color: var( --scw-color-primary-09 );
+  }
+  border-radius: 10px 10px 10px 10px; 
+}
+
+@mixin comp-scw-callout-center--sizing {
+  width: 425px;
+  height: 176px;
+}
+
+@mixin comp-scw-callout-center--width {
+  width: 425px;
+}
+
+@mixin comp-scw-callout-center--height {
+  height: 176px;
+}
+
+@mixin comp-scw-callout-center--padding {
+  padding-left: var( --scw-spacing-3 );
+  padding-right: var( --scw-spacing-3 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: var( --scw-spacing-3 );
+}
+
+@mixin comp-scw-callout-center--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: var( --scw-spacing-3 );
+  padding-right: var( --scw-spacing-3 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: var( --scw-spacing-3 );
+  & > *:not(:last-child) { 
+        margin-bottom: 0px; 
+        --margin-bottom: 0px; 
+      } 
+}
+
+@mixin comp-scw-callout-center--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-2 );
+  margin-right: var( --scw-spacing-2 );
+  margin-top: calc( var( --scw-spacing-1 ) * 21.6 );
+  margin-bottom: var( --scw-spacing-2 );
+}
+
+@mixin comp-scw-callout-center--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-2 );
+  padding-right: var( --scw-spacing-2 );
+  padding-top: calc( var( --scw-spacing-1 ) * 21.6 );
+  padding-bottom: var( --scw-spacing-2 );
+}
+
+
+@mixin comp-scw-callout-center-content (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-center-content--sizing {
+  width: 365px;
+  height: 116px;
+}
+
+@mixin comp-scw-callout-center-content--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-center-content--height {
+  height: 116px;
+}
+
+@mixin comp-scw-callout-center-content--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content--figma-autolayout { 
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-bottom: var( --scw-spacing-1 ); 
+        --margin-bottom: var( --scw-spacing-1 ); 
+      } 
+}
+
+@mixin comp-scw-callout-center-content--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content--html-autolayout-margins {
+  display: inline-block;
+  margin-left: var( --scw-spacing-3 );
+  margin-right: var( --scw-spacing-3 );
+  margin-top: var( --scw-spacing-3 );
+  margin-bottom: var( --scw-spacing-3 );
+}
+
+@mixin comp-scw-callout-center-content--html-autolayout-padding {
+  display: inline-block;
+  padding-left: var( --scw-spacing-3 );
+  padding-right: var( --scw-spacing-3 );
+  padding-top: var( --scw-spacing-3 );
+  padding-bottom: var( --scw-spacing-3 );
+}
+
+
+@mixin comp-scw-callout-center-content-scw-base-heading (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--sizing {
+  width: 365px;
+  height: 32px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--height {
+  height: 32px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: 0px; 
+        --margin-right: 0px; 
+      } 
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: calc( var( --scw-spacing-1 ) * 8.4 );
+}
+
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text (
+  $themeVar: false
+) { 
+  text-align: CENTER;
+  font: var( --scw-type-text-bold-08-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
+  } @else {
+    color: var( --scw-color-primary-03 );
+  } 
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--sizing {
+  width: 365px;
+  height: 32px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--height {
+  height: 32px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-heading-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--sizing {
+  width: 365px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: 0px; 
+        --margin-right: 0px; 
+      } 
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: calc( var( --scw-spacing-1 ) * 4.2 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc( var( --scw-spacing-1 ) * 4.2 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 4.7 );
+}
+
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text (
+  $themeVar: false
+) { 
+  text-align: CENTER;
+  font: var( --scw-type-text-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-02 , var( --scw-color-grey-02 ) );
+  } @else {
+    color: var( --scw-color-grey-02 );
+  } 
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--sizing {
+  width: 365px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--width {
+  width: 365px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-scw-base-paragraph-text--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-center-content-links (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  } 
+}
+
+@mixin comp-scw-callout-center-content-links--sizing {
+  width: 174px;
+  height: 37px;
+}
+
+@mixin comp-scw-callout-center-content-links--width {
+  width: 174px;
+}
+
+@mixin comp-scw-callout-center-content-links--height {
+  height: 37px;
+}
+
+@mixin comp-scw-callout-center-content-links--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  & > *:not(:last-child) { 
+        margin-right: var( --scw-spacing-2 ); 
+        --margin-right: var( --scw-spacing-2 ); 
+      } 
+}
+
+@mixin comp-scw-callout-center-content-links--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 9.55 );
+  margin-right: calc( var( --scw-spacing-1 ) * 9.55 );
+  margin-top: calc( var( --scw-spacing-1 ) * 7.9 );
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 9.55 );
+  padding-right: calc( var( --scw-spacing-1 ) * 9.55 );
+  padding-top: calc( var( --scw-spacing-1 ) * 7.9 );
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-1 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-03 , var( --scw-color-primary-03 ) );
+  } @else {
+    background-color: var( --scw-color-primary-03 );
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--sizing {
+  width: 77px;
+  height: 37px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--width {
+  width: 77px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--height {
+  height: 37px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+      } 
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--html-autolayout-margins {
+  display: inline-block;
+  margin-left: 0px;
+  margin-right: calc( var( --scw-spacing-1 ) * 9.7 );
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1--html-autolayout-padding {
+  display: inline-block;
+  padding-left: 0px;
+  padding-right: calc( var( --scw-spacing-1 ) * 9.7 );
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-1-label (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    color: var( --scw-color-grey-10 );
+  } 
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--sizing {
+  width: 45px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--width {
+  width: 45px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-1-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-2 (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar}-10 , var( --scw-color-grey-10 ) );
+  } @else {
+    background-color: var( --scw-color-grey-10 );
+  }
+  border-radius: 6px 6px 6px 6px;
+  border-width: 2px;
+  border-style: solid;
+  @if $borderThemeVar {
+    border-color: var( #{$borderThemeVar}-04 , var( --scw-color-primary-04 ) );
+  } @else {
+    border-color: var( --scw-color-primary-04 );
+  } 
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--sizing {
+  width: 77px;
+  height: 37px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--width {
+  width: 77px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--height {
+  height: 37px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--padding {
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--figma-autolayout { 
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+  & > *:not(:last-child) { 
+        margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+        --margin-right: calc( var( --scw-spacing-1 ) * 0.4 ); 
+      } 
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 9.7 );
+  margin-right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 9.7 );
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-left-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 3.7 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-2-label (
+  $themeVar: false
+) { 
+  text-align: LEFT;
+  font: var( --scw-type-text-bold-06-font );
+  @if $themeVar {
+    color: var( #{$themeVar}-03 , var( --scw-color-primary-03 ) );
+  } @else {
+    color: var( --scw-color-primary-03 );
+  } 
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--sizing {
+  width: 45px;
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--width {
+  width: 45px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--height {
+  height: 27px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--padding {
+  padding-left: initial;
+  padding-right: initial;
+  padding-top: initial;
+  padding-bottom: initial;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-label--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-right: calc( var( --scw-spacing-1 ) * 1.6 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.5 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon (
+  $bgThemeVar: false, 
+  $borderThemeVar: false
+) { 
+  @if $bgThemeVar {
+    background-color: var( #{$bgThemeVar} , rgba(0,0,0,0) );
+  } @else {
+    background-color: rgba(0,0,0,0);
+  }
+  border-radius: 6px 6px 6px 6px; 
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--sizing {
+  width: 24px;
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--width {
+  width: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--height {
+  height: 24px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--padding {
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--figma-autolayout { 
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--absolute-layout {
+   
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--html-autolayout-margins {
+  display: inline-block;
+  margin-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  margin-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  margin-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  margin-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
+}
+
+@mixin comp-scw-callout-center-content-links-link-2-right-icon--html-autolayout-padding {
+  display: inline-block;
+  padding-left: calc( var( --scw-spacing-1 ) * 8.8 );
+  padding-right: calc( var( --scw-spacing-1 ) * -3.5 );
+  padding-top: calc( var( --scw-spacing-1 ) * 0.4 );
+  padding-bottom: calc( var( --scw-spacing-1 ) * 0.9 );
 }