[Brand Refactor] Small fixes batch

.changeset/media-playlist-narrow-spacing.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Adjusted the spacing in the `MediaPlaylist` component on narrow viewports

.changeset/pillar-icon-radius.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Increased the `border-radius` of icons in the `Pillar` component to `12px`

.changeset/statistic-color-consistency.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated the `Statistic` social proof example to use consistent text colors

.changeset/tiles-tablet-columns.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Adjusted the `Tiles` grid to use three columns on tablet viewports

packages/react/src/MediaPlaylist/MediaPlaylist.module.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 {
@@ -240,6 +244,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);

packages/react/src/Pillar/Pillar.module.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%;

packages/react/src/Statistic/Statistic.examples.stories.tsx

@@ -133,7 +133,7 @@ export const SocialProof: Story = {
                   style={{flex: 1, display: 'flex', alignItems: 'center'}}
                 >
                   <Statistic>
-                    <Statistic.Heading weight="normal" size="800" style={{color: 'var(--brand-color-accent-primary)'}}>
+                    <Statistic.Heading weight="normal" size="800" style={{color: 'var(--brand-color-text-emphasized)'}}>
                       39%
                     </Statistic.Heading>
                     <Statistic.Description font="monospace" size="100">

packages/react/src/Tiles/Tiles.module.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;