@primer/react-brand 0.68.0-rc.0963e67e → 0.68.0-rc.485a3446

package/esm/river/river-shared.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n  display: grid;\n  gap: var(--brand-River-spacing-inner);\n  grid-auto-rows: min-content;\n  padding-inline: var(--brand-River-spacing-outerInline);\n  padding-block: var(--brand-River-spacing-outerBlock);\n  container-type: inline-size;\n}\n\n.River--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .River--variant-gridline {\n    gap: var(--base-size-28);\n  }\n}\n\n.River--variant-gridline::before,\n.River--variant-gridline::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  height: 0;\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  z-index: 1;\n}\n\n.River--variant-gridline::before {\n  top: 0;\n}\n\n.River--variant-gridline::after {\n  bottom: 0;\n}\n\n@media screen and (min-width: 80rem) {\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.River--align-center {\n  text-align: center;\n}\n\n.River__content {\n  order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River__visual--rounded {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n  box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32);\n  border-radius: 0;\n  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    justify-content: flex-end;\n    padding-block-end: 0;\n    padding-inline-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n.River__heading {\n  margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n  margin-top: var(--base-size-20);\n}\n\n.River__text strong,\n.River__text b {\n  font-weight: var(--base-text-weight-normal);\n  color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace) !important;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.River__text code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n  line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n  .River__heading-inner:has(code) {\n    line-height: calc(1lh * 2.1);\n  }\n}\n\n.River__text:has(code) {\n  line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n  margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n  padding-block-start: var(--brand-River-spacing-inner);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n  margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n  order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n  order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .River--variant-gridline.River--align-start .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-end .River__visual--has-background {\n    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .River {\n    grid-template-rows: unset;\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    padding: var(--base-size-64);\n    margin: 0;\n  }\n\n  .River__content {\n    order: unset;\n  }\n\n  .River--50-50 {\n    grid-template-columns: [content] 1fr [visual] 1fr;\n  }\n\n  .River--60-40 {\n    grid-template-columns: [content] 4fr [visual] 6fr;\n  }\n\n  .River--align-start {\n    grid-template-areas: 'content visual';\n  }\n\n  .River--align-end {\n    grid-template-areas: 'visual content';\n  }\n\n  .River--align-end.River--60-40 {\n    grid-template-columns: [visual] 6fr [content] 4fr;\n  }\n\n  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River__content {\n    display: grid;\n    align-content: center;\n    grid-area: content;\n  }\n\n  .River--50-50:not(.River--variant-gridline) .River__body-text,\n  .River--50-50:not(.River--variant-gridline) .River__heading {\n    max-width: 400px;\n  }\n\n  .River--align-start:not(.River--variant-gridline) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--align-end:not(.River--variant-gridline) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River__content--align-block-end {\n    align-content: end;\n  }\n\n  .River__visual {\n    grid-area: visual;\n  }\n\n  .River--align-center {\n    grid-auto-rows: min-content;\n    grid-template-columns: unset;\n  }\n\n  .River--align-center .River__content,\n  .River--align-center .River__visual {\n    grid-area: unset;\n    justify-self: center;\n  }\n\n  .River--align-center .River__body-text {\n    max-width: 600px;\n    justify-self: center;\n  }\n\n  .River--align-center .River__visual {\n    margin-bottom: var(--brand-River-spacing-inner);\n  }\n\n  .River--align-center .River__content {\n    margin-top: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n    padding: 0;\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 560fr 676fr;\n  }\n\n  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n    grid-template-columns: 676fr 560fr;\n  }\n\n  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-64);\n    padding-inline-end: var(--brand-River-spacing-inner);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n    padding-inline-end: var(--base-size-64);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-end: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n    padding: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    width: 100%;\n    margin: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual {\n    margin-bottom: 0;\n  }\n\n  .River--variant-gridline.River--align-center {\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__content {\n    margin-top: 0;\n    margin-bottom: var(--base-size-64);\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n}\n\n.RiverBreakout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--brand-RiverBreakout-spacing-inner);\n  padding-block-end: var(--brand-River-spacing-outerBlock);\n  padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n  max-width: 37.5rem; /* 600px */\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-500);\n  font-weight: var(--brand-heading-weight-500);\n  letter-spacing: var(--brand-heading-letterSpacing-500);\n  line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .RiverBreakout .River__content {\n    display: grid;\n    gap: var(--brand-River-spacing-inner);\n    row-gap: var(--brand-River-spacing-innerY);\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 5fr 3fr;\n    grid-auto-rows: auto 1fr;\n  }\n\n  .RiverBreakout .River__text {\n    grid-area: text;\n  }\n\n  .RiverBreakout .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n  }\n\n  .RiverBreakout .River__trailingComponent {\n    grid-area: trailingComponent;\n    justify-self: flex-end;\n    margin-block-start: 0;\n  }\n}\n\n.RiverBreakout--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: 0;\n  gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n.RiverBreakout--variant-gridline::before,\n.RiverBreakout--variant-gridline::after {\n  content: '';\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100vw;\n  height: 0;\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.RiverBreakout--variant-gridline::before {\n  top: 0;\n}\n\n.RiverBreakout--variant-gridline::after {\n  bottom: 0;\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n  overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    margin-block-start: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__content {\n    display: grid;\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n    grid-template-rows: auto 1fr;\n    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n    flex: 1;\n    padding-block: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__text {\n    grid-area: text;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  }\n\n  .RiverBreakout--variant-gridline .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    grid-area: trailingComponent;\n    margin-block-start: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n    border-top: none;\n    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-inline: 0;\n    margin-block: 0;\n    padding-inline: 0;\n    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n    padding-block: 0;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n    align-self: stretch;\n  }\n}\n\n/* Gridline + background: remove outer container top padding (background fills to top edge) */\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n  padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding: var(--base-size-64);\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n    border-radius: 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"river-shared.module.js","names":[],"sources":["../../src/river/river-shared.module.css"],"sourcesContent":[".River {\n  display: grid;\n  gap: var(--brand-River-spacing-inner);\n  grid-auto-rows: min-content;\n  padding-inline: var(--brand-River-spacing-outerInline);\n  padding-block: var(--brand-River-spacing-outerBlock);\n  container-type: inline-size;\n}\n\n.River--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n  padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  gap: var(--base-size-32);\n}\n\n@media screen and (min-width: 48rem) {\n  .River--variant-gridline {\n    gap: var(--base-size-28);\n  }\n}\n\n@media screen and (min-width: 80rem) {\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.River--align-center {\n  text-align: center;\n}\n\n.River__content {\n  order: 2;\n}\n\n.River__visual--fill-media img,\n.River__visual--fill-media picture,\n.River__visual--fill-media video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River__visual--rounded {\n  overflow: hidden;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River__visual--has-shadow {\n  box-shadow: var(--brand-River-visual-shadow);\n}\n\n.River--variant-gridline .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: var(--base-size-32);\n  border-radius: 0;\n  margin-inline: calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));\n}\n\n.River--variant-gridline .River__visual--has-background img,\n.River--variant-gridline .River__visual--has-background picture,\n.River--variant-gridline .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    justify-content: flex-end;\n    padding-block-end: 0;\n    padding-inline-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n    border-start-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .River--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .River--variant-gridline .River__visual--has-background img,\n  .River--variant-gridline .River__visual--has-background picture,\n  .River--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n.River__heading {\n  margin-bottom: var(--brand-River-heading-margin);\n}\n\n.River__call-to-action {\n  margin-top: var(--base-size-20);\n}\n\n.River__text strong,\n.River__text b {\n  font-weight: var(--base-text-weight-normal);\n  color: var(--brand-color-text-default);\n}\n\n.River__heading code,\n.River__text code {\n  font-size: inherit;\n  font-family: var(--brand-fontStack-monospace) !important;\n  background-color: var(--brand-color-canvas-subtle);\n  padding: 0 var(--base-size-4) var(--base-size-2);\n  margin-inline: var(--base-size-2);\n  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n  border-radius: var(--brand-borderRadius-small);\n  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);\n}\n\n.River__text code {\n  padding: var(--base-size-2) var(--base-size-4) 0;\n}\n\n.River__heading-inner:has(code) {\n  line-height: calc(1lh * 1.8);\n}\n\n@media screen and (min-width: 64rem) {\n  .River__heading-inner:has(code) {\n    line-height: calc(1lh * 2.1);\n  }\n}\n\n.River__text:has(code) {\n  line-height: calc(1lh * 1.1);\n}\n\n.River__trailingComponent {\n  margin-block-start: var(--brand-River-spacing-inner);\n}\n\n.River__trailingComponent--divider {\n  padding-block-start: var(--brand-River-spacing-inner);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.River__label {\n  margin-block-end: var(--brand-River-label-margin);\n}\n\n.River--variant-gridline.River--align-start .River__visual {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-start .River__content {\n  order: 2;\n}\n\n.River--variant-gridline.River--align-end .River__content {\n  order: 1;\n}\n\n.River--variant-gridline.River--align-end .River__visual {\n  order: 2;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .River--variant-gridline.River--align-start .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-end .River__visual--has-background {\n    margin-block-end: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    margin-block-start: calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock));\n  }\n}\n\n/* Large breakpoint and up */\n@media screen and (min-width: 63.25rem) {\n  .River {\n    grid-template-rows: unset;\n  }\n\n  .River--variant-gridline .River__visual--has-background {\n    padding: var(--base-size-64);\n    margin: 0;\n  }\n\n  .River__content {\n    order: unset;\n  }\n\n  .River--50-50 {\n    grid-template-columns: [content] 1fr [visual] 1fr;\n  }\n\n  .River--60-40 {\n    grid-template-columns: [content] 4fr [visual] 6fr;\n  }\n\n  .River--align-start {\n    grid-template-areas: 'content visual';\n  }\n\n  .River--align-end {\n    grid-template-areas: 'visual content';\n  }\n\n  .River--align-end.River--60-40 {\n    grid-template-columns: [visual] 6fr [content] 4fr;\n  }\n\n  .River--variant-gridline.River--align-start.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-start: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River--variant-gridline.River--align-end.River--50-50:not(:has(.River__visual--has-background)) .River__visual {\n    margin-inline-end: calc(var(--base-size-80) + var(--base-size-8));\n  }\n\n  .River__content {\n    display: grid;\n    align-content: center;\n    grid-area: content;\n  }\n\n  .River--50-50:not(.River--variant-gridline) .River__body-text,\n  .River--50-50:not(.River--variant-gridline) .River__heading {\n    max-width: 400px;\n  }\n\n  .River--align-start:not(.River--variant-gridline) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--align-end:not(.River--variant-gridline) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River__content--align-block-end {\n    align-content: end;\n  }\n\n  .River__visual {\n    grid-area: visual;\n  }\n\n  .River--align-center {\n    grid-auto-rows: min-content;\n    grid-template-columns: unset;\n  }\n\n  .River--align-center .River__content,\n  .River--align-center .River__visual {\n    grid-area: unset;\n    justify-self: center;\n  }\n\n  .River--align-center .River__body-text {\n    max-width: 600px;\n    justify-self: center;\n  }\n\n  .River--align-center .River__visual {\n    margin-bottom: var(--brand-River-spacing-inner);\n  }\n\n  .River--align-center .River__content {\n    margin-top: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline:not(.River--align-center):has(.River__visual--has-background) {\n    padding: 0;\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  .River--variant-gridline.River--60-40:not(.River--align-center):has(.River__visual--has-background) {\n    grid-template-columns: 560fr 676fr;\n  }\n\n  .River--variant-gridline.River--align-end.River--60-40:has(.River__visual--has-background) {\n    grid-template-columns: 676fr 560fr;\n  }\n\n  .River--variant-gridline.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-64);\n    padding-inline-end: var(--brand-River-spacing-inner);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-start:has(.River__visual--has-background) .River__content {\n    padding-inline-end: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n    padding-inline-end: var(--base-size-64);\n    padding-block: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n\n  .River--variant-gridline.River--50-50.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: calc(var(--base-size-80) + var(--base-size-32));\n  }\n\n  .River--variant-gridline.River--60-40.River--align-end:has(.River__visual--has-background) .River__content {\n    padding-inline-start: var(--base-size-128);\n  }\n\n  .River--variant-gridline.River--align-start:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-end: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--align-end:not(:has(.River__visual--has-background)) .River__content {\n    padding-inline-start: var(--brand-River-spacing-inner);\n  }\n\n  .River--variant-gridline.River--50-50:not(.River--align-center) .River__visual--has-background {\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) {\n    padding: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual--has-background {\n    width: 100%;\n    margin: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__visual {\n    margin-bottom: 0;\n  }\n\n  .River--variant-gridline.River--align-center {\n    gap: 0;\n  }\n\n  .River--variant-gridline.River--align-center .River__content {\n    margin-top: 0;\n    margin-bottom: var(--base-size-64);\n  }\n\n  .River--variant-gridline.River--align-center:has(.River__visual--has-background) .River__content {\n    padding-inline: var(--brand-River-variant-gridline-spacing-outerInline);\n    padding-block-start: var(--brand-River-variant-gridline-spacing-outerBlock);\n  }\n}\n\n.RiverBreakout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--brand-RiverBreakout-spacing-inner);\n  padding-block-end: var(--brand-River-spacing-outerBlock);\n  padding-block-start: var(--brand-River-spacing-outerBlock);\n}\n\n.RiverBreakout .River__text {\n  max-width: 37.5rem; /* 600px */\n  color: var(--brand-color-text-default);\n  font-size: var(--brand-text-size-500);\n  font-weight: var(--brand-heading-weight-500);\n  letter-spacing: var(--brand-heading-letterSpacing-500);\n  line-height: var(--brand-text-lineHeight-500);\n}\n\n.RiverBreakout--muted .River__text {\n  color: var(--brand-color-text-muted);\n}\n\n.RiverBreakout .River__text em,\n.RiverBreakout .River__text b {\n  color: var(--brand-color-text-default);\n  font-style: normal;\n  font-weight: inherit;\n}\n\n.RiverBreakout__hiddenHeading {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.RiverBreakout .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n@media screen and (min-width: 48rem) {\n  .RiverBreakout .River__content {\n    display: grid;\n    gap: var(--brand-River-spacing-inner);\n    row-gap: var(--brand-River-spacing-innerY);\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 5fr 3fr;\n    grid-auto-rows: auto 1fr;\n  }\n\n  .RiverBreakout .River__text {\n    grid-area: text;\n  }\n\n  .RiverBreakout .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n  }\n\n  .RiverBreakout .River__trailingComponent {\n    grid-area: trailingComponent;\n    justify-self: flex-end;\n    margin-block-start: 0;\n  }\n}\n\n.RiverBreakout--variant-gridline {\n  position: relative;\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: 0;\n  gap: 0;\n}\n\n@media screen and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline {\n    width: 100%;\n    max-width: 38.625rem;\n    margin-inline: auto;\n  }\n}\n\n@media screen and (min-width: 618px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline {\n    border-inline: none;\n  }\n}\n\n@media screen and (min-width: 1300px) {\n  .RiverBreakout--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n}\n\n.RiverBreakout--variant-gridline .River__visual {\n  overflow: hidden;\n}\n\n.RiverBreakout--variant-gridline .River__visual--rounded {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__content {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n}\n\n.RiverBreakout--variant-gridline .River__call-to-action {\n  padding-block-start: var(--base-size-12);\n}\n\n.RiverBreakout--variant-gridline .River__trailingComponent--divider {\n  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding-inline: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n}\n\n/* Reset base RiverBreakout grid for gridline variant until desktop breakpoint */\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    margin-block-start: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline:has(.River__trailingComponent--divider) {\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__content {\n    display: grid;\n    grid-template-areas:\n      'text trailingComponent'\n      'cta trailingComponent';\n    grid-template-columns: 1fr var(--brand-RiverBreakout-gridline-trailing-width, 31rem);\n    grid-template-rows: auto 1fr;\n    gap: var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);\n    flex: 1;\n    padding-block: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__text {\n    grid-area: text;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n  }\n\n  .RiverBreakout--variant-gridline .River__call-to-action {\n    grid-area: cta;\n    margin-block: 0;\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent {\n    grid-area: trailingComponent;\n    margin-block-start: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__trailingComponent--divider {\n    border-top: none;\n    border-left: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n    margin-inline: 0;\n    margin-block: 0;\n    padding-inline: 0;\n    padding-inline-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);\n    padding-block: 0;\n    padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);\n    padding-block-end: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);\n    align-self: stretch;\n  }\n}\n\n/* Gridline + background: remove outer container top padding (background fills to top edge) */\n.RiverBreakout--variant-gridline:has(.River__visual--has-background) {\n  padding-block-start: 0;\n}\n\n.RiverBreakout .River__visual--has-background {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color-canvas-subtle);\n  border-radius: 0;\n  overflow: hidden;\n}\n\n.RiverBreakout .River__visual--has-background img,\n.RiverBreakout .River__visual--has-background picture,\n.RiverBreakout .River__visual--has-background video {\n  max-width: 100%;\n  height: auto;\n  width: auto;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout .River__visual--has-background [data-video-player-container] {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverBreakout--variant-gridline .River__visual--has-background {\n  margin-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));\n  padding: var(--base-size-32);\n}\n\n@media screen and (max-width: 47.99rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n}\n\n@media screen and (min-width: 63.25rem) {\n  .RiverBreakout--variant-gridline .River__visual--has-background {\n    align-items: flex-end;\n    padding: var(--base-size-64);\n    padding-block-end: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background img,\n  .RiverBreakout--variant-gridline .River__visual--has-background picture,\n  .RiverBreakout--variant-gridline .River__visual--has-background video {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background [data-video-player-container] {\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {\n    border-radius: 0;\n  }\n}\n"],"mappings":""}