Address feedback

Author: danielguillan

packages/react/src/CTABanner/CTABanner.module.css

@@ -75,7 +75,7 @@
 }
 
 .CTABanner-container {
-  padding: var(--base-size-64) var(--base-size-32);
+  padding: var(--base-size-64) var(--base-size-20);
   z-index: 1;
   width: 100%;
   box-sizing: border-box;
@@ -96,16 +96,17 @@
 }
 
 .CTABanner-content {
+  --CTABanner-content-gap: var(--base-size-16);
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-16);
+  gap: var(--CTABanner-content-gap);
   align-items: flex-start;
   max-width: 800px;
   margin: 0 auto;
 }
 
 .CTABanner--variant-minimal .CTABanner-content {
-  gap: 0;
+  --CTABanner-content-gap: 0;
 }
 
 .CTABanner--variant-balanced .CTABanner-content,
@@ -175,7 +176,7 @@
 /* Large breakpoint and up */
 @media screen and (min-width: 63.25rem) {
   .CTABanner--variant-balanced .CTABanner-content {
-    gap: var(--base-size-32);
+    --CTABanner-content-gap: var(--base-size-32);
   }
   .CTABanner-container {
     padding: var(--base-size-96) var(--base-size-64);
@@ -314,5 +315,6 @@
 }
 
 .CTABanner-buttonGroup {
+  margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));
   padding-block-start: var(--base-size-12);
 }