@primer/brand-css 0.65.0-rc.dd3b4470 → 0.65.0

package/components/CTABanner/CTABanner.css

@@ -35,7 +35,7 @@
 }
 
 .CTABanner-grid {
-  gap: 0;
+  row-gap: 0;
   --brand-Grid-spacing-row: 0;
   padding-inline: 0;
 }
@@ -71,6 +71,15 @@
     justify-content: flex-start;
   }
 
+  .CTABanner--variant-balanced .CTABanner-grid-column--secondary {
+    order: -1;
+    margin-block-start: 0;
+  }
+
+  .CTABanner--variant-balanced .CTABanner-grid-column--primary {
+    margin-block-start: var(--base-size-24);
+  }
+
   .CTABanner-grid-column--secondary {
     margin-block-start: var(--base-size-24);
   }
@@ -220,3 +229,42 @@
   width: 100%;
   height: auto;
 }
+
+.CTABanner-heading code,
+.CTABanner-description code {
+  font-size: inherit;
+  font-family: var(--brand-fontStack-monospace);
+  background-color: var(--brand-color-canvas-default);
+  padding: 0 var(--base-size-4) 0;
+  margin-inline: var(--base-size-2);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
+}
+
+.CTABanner--bgColor-default .CTABanner-heading code,
+.CTABanner--bgColor-default .CTABanner-description code {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.CTABanner-description code {
+  padding: 0 var(--base-size-4) 0;
+}
+
+.CTABanner-heading.CTABanner-heading:has(code) {
+  line-height: calc(1lh * 2);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {
+    line-height: calc(1lh * 2.8);
+  }
+}
+
+.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {
+  line-height: calc(1lh * 1.9);
+}
+
+.CTABanner-description.CTABanner-description:has(code) {
+  line-height: calc(1lh * 1.25);
+}

package/components/Card/Card.css

@@ -98,6 +98,29 @@
   text-decoration: none !important;
 }
 
+.Card__link code,
+.Card__description code {
+  font-size: inherit;
+  font-family: var(--brand-fontStack-monospace);
+  background-color: var(--brand-color-canvas-subtle);
+  padding: 0 var(--base-size-4) var(--base-size-2);
+  margin-inline: var(--base-size-2);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
+}
+
+.Card__description code {
+  padding: var(--base-size-2) var(--base-size-4) 0;
+}
+.Card__link:has(code) {
+  line-height: calc(1lh * 1.4);
+}
+
+.Card__description.Card__description:has(code) {
+  line-height: calc(1lh * 1.25);
+}
+
 .Card--disableAnimation:hover .Card__link {
   text-decoration: underline !important;
 }

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

@@ -246,7 +246,7 @@
 .Hero-label {
   text-transform: uppercase;
   letter-spacing: 1px;
-  margin-block-end: var(--base-size-24);
+  margin-block-end: var(--base-size-16);
   display: flex;
   align-items: center;
 }
@@ -259,6 +259,7 @@
 .Hero-heading b {
   color: var(--brand-color-accent-primary);
   font-style: normal;
+  font-weight: inherit;
 }
 
 .Hero-heading--fullWidth {

package/components/LogoSuite/LogoSuite.css

@@ -68,14 +68,17 @@
 .LogoSuite__logobar--variant-emphasis img,
 .LogoSuite__logobar--variant-emphasis a {
   width: auto;
-  height: var(--base-size-32);
+  height: var(--base-size-28);
 }
 
 @media screen and (min-width: 48rem) {
   .LogoSuite__logobar--variant-muted svg,
   .LogoSuite__logobar--variant-muted img,
-  .LogoSuite__logobar--variant-muted a {
-    height: var(--base-size-40);
+  .LogoSuite__logobar--variant-muted a,
+  .LogoSuite__logobar--variant-emphasis svg,
+  .LogoSuite__logobar--variant-emphasis img,
+  .LogoSuite__logobar--variant-emphasis a {
+    height: var(--base-size-32);
   }
 }
 

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,
@@ -46,6 +136,36 @@
   color: var(--brand-color-text-default);
 }
 
+.River__heading code,
+.River__text code {
+  font-size: inherit;
+  font-family: var(--brand-fontStack-monospace) !important;
+  background-color: var(--brand-color-canvas-subtle);
+  padding: 0 var(--base-size-4) var(--base-size-2);
+  margin-inline: var(--base-size-2);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
+}
+
+.River__text code {
+  padding: var(--base-size-2) var(--base-size-4) 0;
+}
+
+.River__heading-inner:has(code) {
+  line-height: calc(1lh * 1.8);
+}
+
+@media screen and (min-width: 64rem) {
+  .River__heading-inner:has(code) {
+    line-height: calc(1lh * 2.1);
+  }
+}
+
+.River__text:has(code) {
+  line-height: calc(1lh * 1.1);
+}
+
 .River__trailingComponent {
   margin-block-start: var(--brand-River-spacing-inner);
 }
@@ -59,12 +179,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 +244,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 +302,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--align-start .River__content {
+  .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--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 +393,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 +428,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 +458,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.dd3b4470",
+  "version": "0.65.0",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",