@primer/brand-css 0.65.0-rc.0d69fc03 → 0.65.0-rc.4081e0d2

package/components/EyebrowText/EyebrowText.css

@@ -0,0 +1,4 @@
+.EyebrowText {
+  text-transform: uppercase;
+  letter-spacing: var(--brand-text-letterSpacing-100);
+}

package/components/Hero/Hero.css

@@ -256,6 +256,12 @@
   max-width: 924px;
 }
 
+.Hero-heading b {
+  color: var(--brand-color-accent-primary);
+  font-style: normal;
+  font-weight: inherit;
+}
+
 .Hero-heading--fullWidth {
   max-width: unset;
 }

package/components/SubNav/SubNav.css

@@ -582,7 +582,7 @@
   .SubNav__links-overlay {
     align-items: center;
     display: flex;
-    gap: var(--base-size-20);
+    gap: var(--base-size-2);
     z-index: 92;
     flex-grow: 1;
     padding-inline-start: var(--base-size-24);
@@ -592,7 +592,8 @@
     text-decoration: none !important; /* dotcom override */
     transition: color 0.2s var(--brand-animation-easing-glide);
     position: relative;
-    padding: var(--base-size-4) 0;
+    padding: var(--base-size-4) var(--base-size-12);
+    border-radius: var(--brand-borderRadius-full);
   }
 
   .SubNav__link-label {
@@ -703,8 +704,6 @@
   /* Active link pill styling */
   .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {
     background-color: var(--brand-SubNav-color-link-bgColor);
-    border-radius: var(--brand-borderRadius-full);
-    padding: var(--base-size-4) var(--base-size-12);
     line-height: 1.1em;
   }
 

package/components/Tiles/Tiles.css

@@ -0,0 +1,198 @@
+.Tiles {
+  width: 100%;
+  color: var(--brand-color-text-default);
+}
+
+.Tiles-grid {
+  --tiles-columns: 2;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@media screen and (min-width: 48rem) {
+  .Tiles--layout-default .Tiles-grid {
+    --tiles-columns: 4;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Tiles--layout-default .Tiles-grid {
+    --tiles-columns: 6;
+  }
+}
+
+@media screen and (min-width: 48rem) {
+  .Tiles--layout-compact .Tiles-grid {
+    --tiles-columns: 4;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Tiles--layout-compact .Tiles-grid {
+    --tiles-columns: 8;
+  }
+}
+
+.Tiles--variant-gridlines {
+  position: relative;
+}
+
+.Tiles--variant-gridlines::before,
+.Tiles--variant-gridlines::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.Tiles--variant-gridlines::before {
+  top: 0;
+}
+
+.Tiles--variant-gridlines::after {
+  bottom: 0;
+}
+
+.Tiles--variant-gridlines .Tiles-grid {
+  position: relative;
+  padding-right: var(--brand-borderWidth-thin);
+  padding-bottom: var(--brand-borderWidth-thin);
+}
+
+.Tiles--variant-gridlines .Tiles-grid::before,
+.Tiles--variant-gridlines .Tiles-grid::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  z-index: 1;
+  pointer-events: none;
+}
+
+.Tiles--variant-gridlines .Tiles-grid::before {
+  left: 0;
+}
+
+.Tiles--variant-gridlines .Tiles-grid::after {
+  right: 0;
+}
+
+.Tiles-item {
+  --tiles-inset-shadow: inset 0 0 0 transparent;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% / var(--tiles-columns));
+  box-sizing: border-box;
+  background-color: var(--brand-tiles-bgColor-rest);
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  box-shadow: var(--brand-borderWidth-thin) 0 0 0 var(--brand-color-border-muted),
+    0 var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-muted), var(--tiles-inset-shadow);
+  transition: background-color var(--brand-animation-duration-faster) var(--brand-animation-easing-default),
+    box-shadow var(--brand-animation-duration-faster) var(--brand-animation-easing-default);
+}
+
+.Tiles-item:has(.Tiles-item-link):hover,
+.Tiles-item:has(.Tiles-item-link):focus-within {
+  --tiles-inset-shadow: inset 0 var(--base-size-2) 0 var(--brand-tiles-highlightColor);
+  background-color: var(--brand-tiles-bgColor-hover);
+}
+
+.Tiles-item-link {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  text-decoration: none;
+  color: inherit;
+}
+
+.Tiles-item-link:focus-visible {
+  outline: var(--base-size-4) solid var(--brand-color-focus);
+  outline-offset: calc(-1 * var(--base-size-4));
+  border-radius: var(--brand-borderRadius-small);
+}
+
+.Tiles-item-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+}
+
+.Tiles-item-media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Tiles-item-media svg,
+.Tiles-item-media img {
+  width: auto;
+  height: var(--base-size-40);
+  max-width: 100%;
+}
+
+.Tiles--layout-compact .Tiles-item-media svg,
+.Tiles--layout-compact .Tiles-item-media img {
+  height: var(--base-size-32);
+}
+
+.Tiles-item-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--base-size-4);
+  padding: var(--base-size-12) var(--base-size-16);
+}
+
+.Tiles--layout-compact .Tiles-item-label {
+  opacity: 0;
+  transform: translateY(var(--base-size-4));
+  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+  pointer-events: none;
+}
+
+.Tiles--layout-compact .Tiles-item-link:hover .Tiles-item-label,
+.Tiles--layout-compact .Tiles-item-link:focus-visible .Tiles-item-label {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.Tiles-item-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.Tiles-item-icon {
+  flex-shrink: 0;
+  color: var(--brand-color-text-default);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Tiles-item {
+    transition: none;
+  }
+
+  .Tiles--layout-compact .Tiles-item-label {
+    transition: none;
+  }
+}

package/components/river/river-shared.css

@@ -2,8 +2,48 @@
   display: grid;
   gap: var(--brand-River-spacing-inner);
   grid-auto-rows: min-content;
-  padding-top: var(--brand-River-spacing-outer);
-  padding-bottom: var(--brand-River-spacing-outer);
+  padding-inline: var(--brand-River-spacing-outerInline);
+  padding-block: var(--brand-River-spacing-outerBlock);
+  container-type: inline-size;
+}
+
+.River--variant-gridline {
+  position: relative;
+  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);
+  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);
+  gap: var(--base-size-32);
+}
+
+@media screen and (min-width: 48rem) {
+  .River--variant-gridline {
+    gap: var(--base-size-28);
+  }
+}
+
+.River--variant-gridline::before,
+.River--variant-gridline::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  z-index: 1;
+}
+
+.River--variant-gridline::before {
+  top: 0;
+}
+
+.River--variant-gridline::after {
+  bottom: 0;
+}
+
+@media screen and (min-width: 80rem) {
+  .River--variant-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
 }
 
 .River--align-center {
@@ -32,12 +72,62 @@
   box-shadow: var(--brand-River-visual-shadow);
 }
 
+.River--variant-gridline .River__visual--has-background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--brand-color-canvas-subtle);
+  padding: var(--base-size-32);
+  border-radius: 0;
+  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));
+}
+
+.River--variant-gridline .River__visual--has-background img,
+.River--variant-gridline .River__visual--has-background picture,
+.River--variant-gridline .River__visual--has-background video {
+  max-width: 100%;
+  height: auto;
+  width: auto;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+@media screen and (max-width: 47.99rem) {
+  .River--variant-gridline .River__visual--has-background {
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding-block-end: 0;
+    padding-inline-end: 0;
+  }
+
+  .River--variant-gridline .River__visual--has-background img,
+  .River--variant-gridline .River__visual--has-background picture,
+  .River--variant-gridline .River__visual--has-background video {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+  }
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .River--variant-gridline .River__visual--has-background {
+    align-items: flex-end;
+    padding-block-end: 0;
+  }
+
+  .River--variant-gridline .River__visual--has-background img,
+  .River--variant-gridline .River__visual--has-background picture,
+  .River--variant-gridline .River__visual--has-background video {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+}
+
 .River__heading {
   margin-bottom: var(--brand-River-heading-margin);
 }
 
 .River__call-to-action {
-  margin-top: var(--base-size-24);
+  margin-top: var(--base-size-20);
 }
 
 .River__text strong,
@@ -59,12 +149,47 @@
   margin-block-end: var(--brand-River-label-margin);
 }
 
-/* Medium breakpoint and up */
-@media screen and (min-width: 48rem) {
+.River--variant-gridline.River--align-start .River__visual {
+  order: 1;
+}
+
+.River--variant-gridline.River--align-start .River__content {
+  order: 2;
+}
+
+.River--variant-gridline.River--align-end .River__content {
+  order: 1;
+}
+
+.River--variant-gridline.River--align-end .River__visual {
+  order: 2;
+}
+
+@media screen and (max-width: 63.24rem) {
+  .River--variant-gridline.River--align-start .River__visual--has-background {
+    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));
+  }
+
+  .River--variant-gridline.River--align-end .River__visual--has-background {
+    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));
+  }
+
+  .River--variant-gridline.River--align-center .River__visual--has-background {
+    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));
+  }
+}
+
+/* Large breakpoint and up */
+@media screen and (min-width: 63.25rem) {
   .River {
     grid-template-rows: unset;
   }
 
+  .River--variant-gridline .River__visual--has-background {
+    padding: var(--base-size-64);
+    margin: 0;
+  }
+
   .River__content {
     order: unset;
   }
@@ -89,12 +214,37 @@
     grid-template-columns: [visual] 6fr [content] 4fr;
   }
 
+  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {
+    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));
+  }
+
+  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {
+    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));
+  }
+
   .River__content {
     display: grid;
     align-content: center;
     grid-area: content;
   }
 
+  .River--50-50:not(.River--variant-gridline) .River__body-text,
+  .River--50-50:not(.River--variant-gridline) .River__heading {
+    max-width: 400px;
+  }
+
+  .River--align-start:not(.River--variant-gridline) .River__content {
+    padding-inline-end: var(--base-size-128);
+  }
+
+  .River--align-end:not(.River--variant-gridline) .River__content {
+    padding-inline-start: var(--base-size-128);
+  }
+
+  .River__content--align-block-end {
+    align-content: end;
+  }
+
   .River__visual {
     grid-area: visual;
   }
@@ -122,21 +272,90 @@
   .River--align-center .River__content {
     margin-top: var(--brand-River-spacing-inner);
   }
-}
 
-/* Large breakpoint and up */
-@media screen and (min-width: 63.25rem) {
-  .River--50-50 .River__body-text,
-  .River--50-50 .River__heading {
-    max-width: 400px;
+  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {
+    padding: 0;
+    gap: 0;
+  }
+
+  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {
+    grid-template-columns: 560fr 676fr;
+  }
+
+  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {
+    grid-template-columns: 676fr 560fr;
+  }
+
+  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {
+    padding-inline-start: var(--base-size-64);
+    padding-inline-end: var(--brand-River-spacing-inner);
+    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);
+  }
+
+  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {
+    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));
   }
 
-  .River--align-start .River__content {
+  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {
     padding-inline-end: var(--base-size-128);
   }
 
-  .River--align-end .River__content {
-    padding-inline: var(--base-size-64);
+  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {
+    padding-inline-start: var(--brand-River-spacing-inner);
+    padding-inline-end: var(--base-size-64);
+    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);
+  }
+
+  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {
+    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));
+  }
+
+  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {
+    padding-inline-start: var(--base-size-128);
+  }
+
+  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {
+    padding-inline-end: var(--brand-River-spacing-inner);
+  }
+
+  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {
+    padding-inline-start: var(--brand-River-spacing-inner);
+  }
+
+  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+
+  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {
+    padding: 0;
+  }
+
+  .River--variant-gridline.River--align-center .River__visual--has-background {
+    width: 100%;
+    margin: 0;
+  }
+
+  .River--variant-gridline.River--align-center .River__visual {
+    margin-bottom: 0;
+  }
+
+  .River--variant-gridline.River--align-center {
+    gap: 0;
+  }
+
+  .River--variant-gridline.River--align-center .River__content {
+    margin-top: 0;
+    margin-bottom: var(--base-size-64);
+  }
+
+  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {
+    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);
+    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);
   }
 }
 
@@ -144,8 +363,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--brand-RiverBreakout-spacing-inner);
-  padding-block-end: var(--brand-River-spacing-outer);
-  padding-block-start: var(--brand-River-spacing-outer);
+  padding-block-end: var(--brand-River-spacing-outerBlock);
+  padding-block-start: var(--brand-River-spacing-outerBlock);
 }
 
 .RiverBreakout .River__text {
@@ -179,7 +398,7 @@
 }
 
 .RiverBreakout .River__call-to-action {
-  margin-block-end: var(--base-size-40);
+  padding-block-start: var(--base-size-12);
 }
 
 @media screen and (min-width: 48rem) {
@@ -209,3 +428,187 @@
     margin-block-start: 0;
   }
 }
+
+.RiverBreakout--variant-gridline {
+  position: relative;
+  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);
+  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
+  padding-block-end: 0;
+  gap: 0;
+}
+
+.RiverBreakout--variant-gridline::before,
+.RiverBreakout--variant-gridline::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.RiverBreakout--variant-gridline::before {
+  top: 0;
+}
+
+.RiverBreakout--variant-gridline::after {
+  bottom: 0;
+}
+
+@media screen and (min-width: 80rem) {
+  .RiverBreakout--variant-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+.RiverBreakout--variant-gridline .River__visual {
+  overflow: hidden;
+}
+
+.RiverBreakout--variant-gridline .River__visual--rounded {
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.RiverBreakout--variant-gridline .River__content {
+  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
+  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);
+  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);
+}
+
+.RiverBreakout--variant-gridline .River__call-to-action {
+  padding-block-start: var(--base-size-12);
+}
+
+.RiverBreakout--variant-gridline .River__trailingComponent--divider {
+  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
+  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));
+  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);
+}
+
+/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .RiverBreakout--variant-gridline .River__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .RiverBreakout--variant-gridline .River__trailingComponent {
+    margin-block-start: 0;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {
+    padding-block-end: 0;
+  }
+
+  .RiverBreakout--variant-gridline .River__content {
+    display: grid;
+    grid-template-areas:
+      'text trailingComponent'
+      'cta trailingComponent';
+    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);
+    grid-template-rows: auto 1fr;
+    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);
+    flex: 1;
+    padding-block: 0;
+  }
+
+  .RiverBreakout--variant-gridline .River__text {
+    grid-area: text;
+    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
+  }
+
+  .RiverBreakout--variant-gridline .River__call-to-action {
+    grid-area: cta;
+    margin-block: 0;
+    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);
+  }
+
+  .RiverBreakout--variant-gridline .River__trailingComponent {
+    grid-area: trailingComponent;
+    margin-block-start: 0;
+  }
+
+  .RiverBreakout--variant-gridline .River__trailingComponent--divider {
+    border-top: none;
+    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+    margin-inline: 0;
+    margin-block: 0;
+    padding-inline: 0;
+    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);
+    padding-block: 0;
+    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
+    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);
+    align-self: stretch;
+  }
+}
+
+/* Gridline + background: remove outer container top padding (background fills to top edge) */
+.RiverBreakout--variant-gridline:has(.River__visual--has-background) {
+  padding-block-start: 0;
+}
+
+.RiverBreakout .River__visual--has-background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--brand-color-canvas-subtle);
+  border-radius: 0;
+  overflow: hidden;
+}
+
+.RiverBreakout .River__visual--has-background img,
+.RiverBreakout .River__visual--has-background picture,
+.RiverBreakout .River__visual--has-background video {
+  max-width: 100%;
+  height: auto;
+  width: auto;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.RiverBreakout--variant-gridline .River__visual--has-background {
+  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));
+  padding: var(--base-size-32);
+}
+
+@media screen and (max-width: 47.99rem) {
+  .RiverBreakout--variant-gridline .River__visual--has-background {
+    align-items: flex-end;
+    padding-block-end: 0;
+  }
+
+  .RiverBreakout--variant-gridline .River__visual--has-background img,
+  .RiverBreakout--variant-gridline .River__visual--has-background picture,
+  .RiverBreakout--variant-gridline .River__visual--has-background video {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .RiverBreakout--variant-gridline .River__visual--has-background {
+    align-items: flex-end;
+    padding-block-end: 0;
+  }
+
+  .RiverBreakout--variant-gridline .River__visual--has-background img,
+  .RiverBreakout--variant-gridline .River__visual--has-background picture,
+  .RiverBreakout--variant-gridline .River__visual--has-background video {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .RiverBreakout--variant-gridline .River__visual--has-background {
+    padding: var(--base-size-64);
+  }
+
+  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {
+    border-radius: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.65.0-rc.0d69fc03",
+  "version": "0.65.0-rc.4081e0d2",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",