@primer/brand-css 0.71.1-rc.8e8d7e50 → 0.72.0-rc.44ea78b6

package/components/CTABanner/CTABanner.css

@@ -75,12 +75,16 @@
 }
 
 .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;
 }
 
+.CTABanner-container--rounded {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
 .CTABanner--variant-balanced .CTABanner-container {
   padding-inline: var(--base-size-20);
   padding-block: var(--base-size-32);
@@ -92,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,
@@ -170,11 +175,8 @@
 
 /* Large breakpoint and up */
 @media screen and (min-width: 63.25rem) {
-  .CTABanner-content {
-    gap: var(--base-size-24);
-  }
   .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);
@@ -311,3 +313,8 @@
 .CTABanner-description.CTABanner-description:has(code) {
   line-height: calc(1lh * 1.25);
 }
+
+.CTABanner-buttonGroup {
+  margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));
+  padding-block-start: var(--base-size-12);
+}

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -1,5 +1,20 @@
 .SectionIntroStacked {
-  --brand-Grid-spacing-row: var(--base-size-48);
+  --brand-Grid-spacing-row: var(--base-size-64);
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .SectionIntroStacked {
+    max-width: 618px;
+    margin-inline: auto;
+  }
+
+  .SectionIntroStacked.SectionIntroStacked--variant-gridline {
+    padding-inline: var(--base-size-32);
+    padding-block: calc(var(--base-size-64) - var(--base-size-4));
+
+    --SectionIntroStacked-item-divider-overflow-start: var(--base-size-32);
+    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-32);
+  }
 }
 
 .SectionIntroStacked--variant-gridline {
@@ -21,15 +36,6 @@
   }
 }
 
-@media screen and (min-width: 63.25rem) {
-  .SectionIntroStacked--variant-gridline {
-    padding-inline: var(--base-size-64);
-    padding-block: var(--base-size-64);
-    --SectionIntroStacked-item-divider-overflow-start: 0px;
-    --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));
-  }
-}
-
 @media screen and (min-width: 80rem) {
   .SectionIntroStacked--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -71,10 +77,13 @@
   flex-direction: column;
 }
 
-@media screen and (max-width: 63.25rem) {
+@media screen and (max-width: 63.24rem) {
   .SectionIntroStacked-heading {
     font-size: var(--brand-text-size-600);
   }
+  .SectionIntroStacked-items {
+    overflow: hidden;
+  }
 }
 
 @media screen and (min-width: 63.25rem) {
@@ -86,15 +95,18 @@
   .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {
     border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
     margin-block: calc(-1 * var(--base-size-64));
-    padding-block: 0;
+    padding-block: calc(var(--base-size-64) - var(--base-size-32));
     position: static;
     top: auto;
   }
 
+  .SectionIntroStacked-content {
+    padding-inline-end: var(--base-size-80);
+  }
+
   .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {
     /* Inset item content from the vertical gridline */
-    padding-inline-start: var(--base-size-32);
-    padding-inline-end: var(--base-size-32);
+    padding-inline-start: var(--base-size-64);
   }
 }
 
@@ -137,21 +149,22 @@
 
 .SectionIntroStackedItem-item--with-icon {
   display: flex;
-  flex-direction: row;
   align-items: flex-start;
   gap: var(--base-size-24);
+  flex-direction: column;
 }
 
-@media screen and (min-width: 63.25rem) {
+@media screen and (min-width: 48rem) {
   .SectionIntroStackedItem-item--with-icon {
     gap: var(--base-size-48);
+    flex-direction: row;
   }
 }
 
 .SectionIntroStackedItem__content {
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-8);
+  gap: var(--base-size-12);
   flex: 1;
   min-width: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.71.1-rc.8e8d7e50",
+  "version": "0.72.0-rc.44ea78b6",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",