@primer/brand-css 0.70.0-rc.9ef718be → 0.70.0-rc.c27c2e9b

package/components/Footnotes/Footnotes.css

@@ -2,7 +2,7 @@
   padding-block: var(--base-size-80);
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-24);
+  gap: var(--base-size-12);
 }
 
 .Footnotes--variant-citations {

package/components/Hero/Hero.css

@@ -380,8 +380,9 @@
 
 /* Header column (eyebrow, heading) */
 .Hero-expressive-header-column {
-  padding: var(--base-size-32);
-  padding-block-end: var(--base-size-24);
+  padding: var(--base-size-36);
+  padding-inline: var(--base-size-20);
+  padding-block-end: var(--base-size-28);
   border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
   display: flex;
   align-items: center;
@@ -390,6 +391,7 @@
 /* Body column (description, actions, trailing) */
 .Hero-expressive-body-column {
   padding: var(--base-size-32);
+  padding-inline: var(--base-size-20);
   padding-block-start: var(--base-size-24);
 }
 
@@ -423,7 +425,7 @@
   }
 
   .Hero--variant-gridline-expressive .Hero-actions {
-    margin-block-start: var(--base-size-28);
+    margin-block-start: var(--base-size-24);
   }
 
   .Hero--variant-gridline-expressive .Hero-trailing {

package/components/MediaPlaylist/MediaPlaylist.css

@@ -10,6 +10,10 @@
     margin-inline: auto;
     padding: 0;
   }
+
+  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {
+    margin-block-start: var(--base-size-12);
+  }
 }
 
 .MediaPlaylist__layout {
@@ -241,6 +245,12 @@
   gap: var(--base-size-12);
 }
 
+@media screen and (max-width: 63.24rem) {
+  .MediaPlaylist__mediaPanels {
+    padding-block-end: var(--base-size-24);
+  }
+}
+
 @media screen and (min-width: 38.625rem) {
   .MediaPlaylist {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);

package/components/Pillar/Pillar.css

@@ -40,6 +40,10 @@
   margin-bottom: var(--base-size-48);
 }
 
+.Pillar__icon--with-background {
+  border-radius: var(--base-size-12);
+}
+
 .Pillar__icon--with-background > svg {
   width: 100%;
   height: 100%;

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -158,5 +158,5 @@
 
 .SectionIntroStackedItem__icon {
   flex-shrink: 0;
-  border-radius: var(--brand-borderRadius-medium);
+  border-radius: var(--base-size-12);
 }

package/components/Tiles/Tiles.css

@@ -19,6 +19,12 @@
   }
 }
 
+@media screen and (min-width: 34rem) and (max-width: 47.99rem) {
+  .Tiles-grid {
+    --tiles-columns: 3;
+  }
+}
+
 @media screen and (min-width: 63.25rem) {
   .Tiles--layout-default .Tiles-grid {
     --tiles-columns: 6;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.70.0-rc.9ef718be",
+  "version": "0.70.0-rc.c27c2e9b",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",