@primer/react-brand 0.72.0-rc.4db5fc89 → 0.72.0-rc.65d39ab5

package/esm/river/River/River.js

@@ -48,7 +48,10 @@ var m = "50:50", h = "start", g = "default", _ = u(({ animate: n, imageTextRatio
 				className: c.River__label,
 				children: k
 			}),
-			!O && !k && g && /* @__PURE__ */ f("div", { children: /* @__PURE__ */ f(g, {}) }),
+			!O && !k && g && /* @__PURE__ */ f("div", {
+				className: c.River__leadingComponent,
+				children: /* @__PURE__ */ f(g, {})
+			}),
 			l.isValidElement(T) && /* @__PURE__ */ f("div", {
 				className: c.River__heading,
 				children: l.cloneElement(T, {

package/esm/river/River/River.js.map

@@ -1 +1 @@
-{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n  /**\n   * Only specific children are valid.\n   * These include: `River.Visual` and `River.Content`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end' | 'center'\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` applies lateral spacing for use in bordered grid layouts.\n   */\n  variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n  Visual: React.ReactElement<RiverVisualProps> | null\n  Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n  (\n    {\n      animate,\n      imageTextRatio = defaultRiverImageTextRatio,\n      align = defaultRiverAlign,\n      variant = defaultRiverVariant,\n      className,\n      children,\n      style,\n      ...rest\n    }: RiverProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n      (acc, child) => {\n        if (React.isValidElement(child) && typeof child.type !== 'string') {\n          if (child.type === Visual) {\n            acc.Visual = child as React.ReactElement<RiverVisualProps>\n          }\n          if (child.type === RiverContent) {\n            acc.Content = child as React.ReactElement<RiverContentProps>\n          }\n        }\n        return acc\n      },\n      {Visual: null, Content: null},\n    )\n\n    const visualPosition = VisualChild?.props.position ?? 'default'\n    const visualPadding = VisualChild?.props.padding ?? 'default'\n    const hasNonDefaultPosition = visualPosition !== 'default'\n    const hasNonDefaultPadding = visualPadding !== 'default'\n    const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding\n    const supportsVisualLayoutOverrides = variant === 'gridline'\n\n    if (\n      hasVisualLayoutOverrides &&\n      !supportsVisualLayoutOverrides &&\n      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n      )\n    }\n\n    const VisualChildWithVariantStyles = VisualChild\n      ? React.cloneElement(VisualChild, {\n          className: clsx(\n            VisualChild.props.className,\n            variant === 'gridline' && styles['River__visual--has-background'],\n          ),\n        })\n      : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.River,\n          styles[`River--${imageTextRatio.replace(':', '-')}`],\n          styles[`River--align-${align}`],\n          styles[`River--variant-${variant}`],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChildWithVariantStyles}\n      </section>\n    )\n  },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n  /**\n   * Aligns the content vertically within its container.\n   */\n  align?: RiverContentAlign\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  /**\n   * When `true`, a divider will be rendered between the standard river and optional trailing content.\n   */\n  trailingComponentDivider?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  leadingComponent?: React.FunctionComponent\n  /**\n   * Only valid children are allowed.\n   * These include: `Heading`, `Text` and `Link`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n  (\n    {\n      align = 'center',\n      animate,\n      children,\n      className,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      trailingComponentDivider = false,\n      style,\n      ...rest\n    }: RiverContentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n    const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n    const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n    const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n    const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.isValidElement(LabelChild) && !LeadingComponent && (\n          <div className={styles.River__label}>\n            {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n          </div>\n        )}\n\n        {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n          <div className={styles.River__label}>{EyebrowTextChild}</div>\n        )}\n\n        {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n          <div>\n            <LeadingComponent />\n          </div>\n        )}\n\n        {React.isValidElement<HeadingProps>(HeadingChild) && (\n          <div className={styles.River__heading}>\n            {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n              // as uses h3 default, but can be overridden\n              as: HeadingChild.props.as || 'h3',\n              size: HeadingChild.props.size || '5',\n              weight: HeadingChild.props.weight,\n              className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n            })}\n          </div>\n        )}\n\n        {React.isValidElement<TextProps>(TextChild) && (\n          <div className={styles['River__body-text']}>\n            {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n              variant: 'muted',\n              as: 'p',\n              className: clsx(styles.River__text, TextChild.props.className),\n            })}\n          </div>\n        )}\n        {React.isValidElement<LinkProps>(LinkChild) && (\n          <div className={styles['River__call-to-action']}>\n            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n              size: 'medium',\n              variant: LinkChild.props.variant || 'accent',\n            })}\n          </div>\n        )}\n        {TrailingComponent && (\n          <div\n            className={clsx(\n              styles.River__trailingComponent,\n              trailingComponentDivider && styles['River__trailingComponent--divider'],\n            )}\n          >\n            <TrailingComponent />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport const RiverVisualPositionOptions = [\n  'default',\n  'center',\n  'block-end',\n  'block-end-inline-start',\n  'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n  React.HtmlHTMLAttributes<HTMLDivElement> &\n  PropsWithChildren<{\n    /**\n     * Applies automatic size constraints to child images and video.\n     * This can be disabled by setting this prop to `false`.\n     */\n    fillMedia?: boolean\n    /**\n     * `img` and `video` elements will apply a shadow by default.\n     * This can be disabled by setting this prop to `false`.\n     */\n    hasShadow?: boolean\n    /**\n     * Enables rounded corners.\n     * Can optionally be disabled.\n     */\n    rounded?: boolean\n  }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n  /**\n   * Positions media within the visual region in the gridline variant.\n   */\n  position?: RiverVisualPosition\n  /**\n   * Controls media padding within the visual region in the gridline variant.\n   */\n  padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n  (\n    {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.River__visual,\n          hasShadow && styles['River__visual--has-shadow'],\n          fillMedia && styles['River__visual--fill-media'],\n          rounded && styles['River__visual--rounded'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n  ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(\n        position !== 'default' && styles[`River__visual--position-${position}`],\n        padding !== 'default' && styles[`River__visual--padding-${padding}`],\n        className,\n      )}\n      {...rest}\n    />\n  ),\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":";;;;;;;;;;;;;;AAoDA,IAAa,IAA6B,SAC7B,IAAoB,SACpB,IAAoC,WAO3C,IAAO,GAET,EACE,YACA,oBAAiB,GACjB,WAAQ,GACR,aAAU,GACV,cACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,EAAC,QAAQ,GAAa,SAAS,MAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,QACnF,GAAK,OACA,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aACnD,EAAM,SAAS,MACjB,EAAI,SAAS,IAEX,EAAM,SAAS,MACjB,EAAI,UAAU,KAGX,IAET;EAAC,QAAQ;EAAM,SAAS;EAAK,CAC9B,EAEK,IAAiB,GAAa,MAAM,YAAY,WAChD,IAAgB,GAAa,MAAM,WAAW;AAMpD,EAL8B,MAAmB,aACpB,MAAkB,cAET,MAAY,eAAA,QAAA,IAAA,aAKtB,iBAAA,QAAA,IAAA,aAA0C,WAGpE,QAAQ,KACN,sHAAsH,EAAe,iBAAiB,EAAc,IACrK;CAGH,IAAM,IAA+B,IACjC,EAAM,aAAa,GAAa,EAC9B,WAAW,EACT,EAAY,MAAM,WAClB,MAAY,cAAc,EAAO,iCAClC,EACF,CAAC,GACF;AAEJ,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,UAAU,EAAe,QAAQ,KAAK,IAAI,KACjD,EAAO,gBAAgB,MACvB,EAAO,kBAAkB,MACzB,MAAY,cAAc,EAAe,UACzC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,GACA,EACO;;EAGf,EAkCY,IAAe,GAExB,EACE,WAAQ,UACR,YACA,aACA,cACA,kBAAkB,GAClB,mBAAmB,GACnB,8BAA2B,IAC3B,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAe,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAQ,EAE5F,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAa,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAM,EAExF,IAAmB,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAY;AAE1G,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,GAAkB,EAAO,gBAAgB,EAAO,yBAAyB,MAAU,EAAU;EAC7G,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAJN;GAMG,EAAM,eAAe,EAAW,IAAI,CAAC,KACpC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA8C,EAAE,CAAC;IACjE,CAAA;GAGP,CAAC,KAAc,EAAM,eAAe,EAAiB,IAAI,CAAC,KACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAe;IAAuB,CAAA;GAG9D,CAAC,KAAc,CAAC,KAAoB,KACnC,kBAAC,OAAD,EAAA,UACE,kBAAC,GAAD,EAAoB,CAAA,EAChB,CAAA;GAGP,EAAM,eAA6B,EAAa,IAC/C,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAAkD;KAEpE,IAAI,EAAa,MAAM,MAAM;KAC7B,MAAM,EAAa,MAAM,QAAQ;KACjC,QAAQ,EAAa,MAAM;KAC3B,WAAW,EAAK,EAAa,MAAM,WAAW,EAAO,wBAAwB;KAC9E,CAAC;IACE,CAAA;GAGP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,SAAS;KACT,IAAI;KACJ,WAAW,EAAK,EAAO,aAAa,EAAU,MAAM,UAAU;KAC/D,CAAC;IACE,CAAA;GAEP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,MAAM;KACN,SAAS,EAAU,MAAM,WAAW;KACrC,CAAC;IACE,CAAA;GAEP,KACC,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,0BACP,KAA4B,EAAO,qCACpC;cAED,kBAAC,GAAD,EAAqB,CAAA;IACjB,CAAA;GAEJ;;EAGX,EAEY,IAA6B;CACxC;CACA;CACA;CACA;CACA;CACD,EAGY,IAA4B;CAAC;CAAW;CAAQ;CAAM,EAkCtD,IAAkB,GAE3B,EAAC,eAAY,IAAM,aAAU,cAAW,eAAY,IAAO,aAAU,IAAM,GAAG,KAC9E,MAGE,kBAAC,OAAD;CACO;CACL,WAAW,EACT,EAAO,eACP,KAAa,EAAO,8BACpB,KAAa,EAAO,8BACpB,KAAW,EAAO,2BAClB,EACD;CACD,GAAI;CAEH;CACG,CAAA,CAGX,EAEK,IAAS,GACZ,EAAC,cAAW,cAAW,WAAW,aAAU,WAAW,GAAG,KAAO,MAChE,kBAAC,GAAD;CACO;CACL,WAAW,EACT,MAAa,aAAa,EAAO,2BAA2B,MAC5D,MAAY,aAAa,EAAO,0BAA0B,MAC1D,EACD;CACD,GAAI;CACJ,CAAA,CAEL,EAKY,IAAQ,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAa,CAAC"}
+{"version":3,"file":"River.js","names":[],"sources":["../../../src/river/River/River.tsx"],"sourcesContent":["import React, {forwardRef, PropsWithChildren, useMemo, type Ref} from 'react'\nimport {clsx} from 'clsx'\nimport {Heading, type HeadingProps} from '../../Heading'\nimport {Text, type TextProps} from '../../Text'\nimport {Link, type LinkProps} from '../../Link'\nimport {Label, type LabelProps} from '../../Label'\nimport {EyebrowText} from '../../EyebrowText'\nimport {useAnimation} from '../../animation'\nimport type {BaseProps} from '../../component-helpers'\n\n/**\n * Design tokens\n */\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/base.css'\nimport '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/river/river.css'\n\n/** * Main Stylesheet (as a CSS Module) */\nimport styles from '../river-shared.module.css'\nimport gridlineStyles from '../../component-helpers/shared.module.css'\n\nexport const RiverVariants = ['default', 'gridline'] as const\nexport const BorderedGrid = 'gridline' as const\nexport const GridLine = 'gridline' as const\nexport type RiverVariant = (typeof RiverVariants)[number]\n\nexport const RiverContentAlignValues = ['center', 'block-end'] as const\nexport type RiverContentAlign = (typeof RiverContentAlignValues)[number]\n\nexport type RiverProps = {\n  /**\n   * Only specific children are valid.\n   * These include: `River.Visual` and `River.Content`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<RiverVisualProps | RiverContentProps>[]\n  /**\n   * Apply an alternative image to text column ratio. The default is `50:50`.\n   */\n  imageTextRatio?: '60:40' | '50:50'\n  /**\n   * Adjust the order of the `Content` column. The default is `start`.\n   */\n  align?: 'start' | 'end' | 'center'\n  /**\n   * Apply a visual variant. The default is `default`.\n   * `gridline` applies lateral spacing for use in bordered grid layouts.\n   */\n  variant?: RiverVariant\n} & BaseProps<HTMLElement> &\n  React.HTMLAttributes<HTMLElement>\n\nexport const defaultRiverImageTextRatio = '50:50'\nexport const defaultRiverAlign = 'start'\nexport const defaultRiverVariant: RiverVariant = 'default'\n\ntype ValidRootChildren = {\n  Visual: React.ReactElement<RiverVisualProps> | null\n  Content: React.ReactElement<RiverContentProps> | null\n}\n\nconst Root = forwardRef(\n  (\n    {\n      animate,\n      imageTextRatio = defaultRiverImageTextRatio,\n      align = defaultRiverAlign,\n      variant = defaultRiverVariant,\n      className,\n      children,\n      style,\n      ...rest\n    }: RiverProps,\n    ref: Ref<HTMLElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const {Visual: VisualChild, Content: ContentChild} = React.Children.toArray(children).reduce<ValidRootChildren>(\n      (acc, child) => {\n        if (React.isValidElement(child) && typeof child.type !== 'string') {\n          if (child.type === Visual) {\n            acc.Visual = child as React.ReactElement<RiverVisualProps>\n          }\n          if (child.type === RiverContent) {\n            acc.Content = child as React.ReactElement<RiverContentProps>\n          }\n        }\n        return acc\n      },\n      {Visual: null, Content: null},\n    )\n\n    const visualPosition = VisualChild?.props.position ?? 'default'\n    const visualPadding = VisualChild?.props.padding ?? 'default'\n    const hasNonDefaultPosition = visualPosition !== 'default'\n    const hasNonDefaultPadding = visualPadding !== 'default'\n    const hasVisualLayoutOverrides = hasNonDefaultPosition || hasNonDefaultPadding\n    const supportsVisualLayoutOverrides = variant === 'gridline'\n\n    if (\n      hasVisualLayoutOverrides &&\n      !supportsVisualLayoutOverrides &&\n      (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')\n    ) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `River: River.Visual position and padding are only supported when River uses variant=\"gridline\"; ignoring position=\"${visualPosition}\" and padding=\"${visualPadding}\".`,\n      )\n    }\n\n    const VisualChildWithVariantStyles = VisualChild\n      ? React.cloneElement(VisualChild, {\n          className: clsx(\n            VisualChild.props.className,\n            variant === 'gridline' && styles['River__visual--has-background'],\n          ),\n        })\n      : null\n\n    return (\n      <section\n        ref={ref}\n        className={clsx(\n          styles.River,\n          styles[`River--${imageTextRatio.replace(':', '-')}`],\n          styles[`River--align-${align}`],\n          styles[`River--variant-${variant}`],\n          variant === 'gridline' && gridlineStyles.gridline,\n          animationClasses,\n          className,\n        )}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {ContentChild}\n        {VisualChildWithVariantStyles}\n      </section>\n    )\n  },\n)\n\nexport type RiverContentProps = BaseProps<HTMLDivElement> & {\n  /**\n   * Aligns the content vertically within its container.\n   */\n  align?: RiverContentAlign\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  trailingComponent?: React.FunctionComponent\n  /**\n   * When `true`, a divider will be rendered between the standard river and optional trailing content.\n   */\n  trailingComponentDivider?: boolean\n  /**\n   * Escape-hatch for inserting custom React components.\n   * Warning:\n   *   This prop isn't advertised in our docs but remains part of the public API for edge-cases.\n   *   Need to use this prop? Please check in with #primer-brand first to confirm correct usage.\n   */\n  leadingComponent?: React.FunctionComponent\n  /**\n   * Only valid children are allowed.\n   * These include: `Heading`, `Text` and `Link`.\n   * The declarative order of the children will be ignored in the rendered output\n   * to enforce correct HTML semantics.\n   */\n  children: React.ReactElement<TextProps> | React.ReactElement<HeadingProps | TextProps | LinkProps>[]\n} & React.HTMLAttributes<HTMLDivElement>\n\nexport const RiverContent = forwardRef(\n  (\n    {\n      align = 'center',\n      animate,\n      children,\n      className,\n      leadingComponent: LeadingComponent,\n      trailingComponent: TrailingComponent,\n      trailingComponentDivider = false,\n      style,\n      ...rest\n    }: RiverContentProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {classes: animationClasses, styles: animationInlineStyles} = useAnimation(animate)\n\n    const Children = useMemo(() => React.Children.toArray(children), [children])\n\n    const HeadingChild = Children.find(child => React.isValidElement(child) && child.type === Heading)\n\n    const TextChild = Children.find(child => React.isValidElement(child) && child.type === Text)\n\n    const LinkChild = Children.find(child => React.isValidElement(child) && child.type === Link)\n\n    const LabelChild = Children.find(child => React.isValidElement(child) && child.type === Label)\n\n    const EyebrowTextChild = Children.find(child => React.isValidElement(child) && child.type === EyebrowText)\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(animationClasses, styles.River__content, styles[`River__content--align-${align}`], className)}\n        style={{...animationInlineStyles, ...style}}\n        {...rest}\n      >\n        {React.isValidElement(LabelChild) && !LeadingComponent && (\n          <div className={styles.River__label}>\n            {React.cloneElement(LabelChild as React.ReactElement<LabelProps>, {})}\n          </div>\n        )}\n\n        {!LabelChild && React.isValidElement(EyebrowTextChild) && !LeadingComponent && (\n          <div className={styles.River__label}>{EyebrowTextChild}</div>\n        )}\n\n        {!LabelChild && !EyebrowTextChild && LeadingComponent && (\n          <div className={styles.River__leadingComponent}>\n            <LeadingComponent />\n          </div>\n        )}\n\n        {React.isValidElement<HeadingProps>(HeadingChild) && (\n          <div className={styles.River__heading}>\n            {React.cloneElement(HeadingChild as React.ReactElement<HeadingProps>, {\n              // as uses h3 default, but can be overridden\n              as: HeadingChild.props.as || 'h3',\n              size: HeadingChild.props.size || '5',\n              weight: HeadingChild.props.weight,\n              className: clsx(HeadingChild.props.className, styles['River__heading-inner']),\n            })}\n          </div>\n        )}\n\n        {React.isValidElement<TextProps>(TextChild) && (\n          <div className={styles['River__body-text']}>\n            {React.cloneElement(TextChild as React.ReactElement<TextProps>, {\n              variant: 'muted',\n              as: 'p',\n              className: clsx(styles.River__text, TextChild.props.className),\n            })}\n          </div>\n        )}\n        {React.isValidElement<LinkProps>(LinkChild) && (\n          <div className={styles['River__call-to-action']}>\n            {React.cloneElement(LinkChild as React.ReactElement<LinkProps>, {\n              size: 'medium',\n              variant: LinkChild.props.variant || 'accent',\n            })}\n          </div>\n        )}\n        {TrailingComponent && (\n          <div\n            className={clsx(\n              styles.River__trailingComponent,\n              trailingComponentDivider && styles['River__trailingComponent--divider'],\n            )}\n          >\n            <TrailingComponent />\n          </div>\n        )}\n      </div>\n    )\n  },\n)\n\nexport const RiverVisualPositionOptions = [\n  'default',\n  'center',\n  'block-end',\n  'block-end-inline-start',\n  'block-end-inline-end',\n] as const\nexport type RiverVisualPosition = (typeof RiverVisualPositionOptions)[number]\n\nexport const RiverVisualPaddingOptions = ['default', 'none', 'all'] as const\nexport type RiverVisualPadding = (typeof RiverVisualPaddingOptions)[number]\n\nexport type RiverVisualBaseProps = BaseProps<HTMLDivElement> &\n  React.HtmlHTMLAttributes<HTMLDivElement> &\n  PropsWithChildren<{\n    /**\n     * Applies automatic size constraints to child images and video.\n     * This can be disabled by setting this prop to `false`.\n     */\n    fillMedia?: boolean\n    /**\n     * `img` and `video` elements will apply a shadow by default.\n     * This can be disabled by setting this prop to `false`.\n     */\n    hasShadow?: boolean\n    /**\n     * Enables rounded corners.\n     * Can optionally be disabled.\n     */\n    rounded?: boolean\n  }>\n\nexport type RiverVisualProps = RiverVisualBaseProps & {\n  /**\n   * Positions media within the visual region in the gridline variant.\n   */\n  position?: RiverVisualPosition\n  /**\n   * Controls media padding within the visual region in the gridline variant.\n   */\n  padding?: RiverVisualPadding\n}\n\nexport const RiverVisualBase = forwardRef<HTMLDivElement, RiverVisualBaseProps>(\n  (\n    {fillMedia = true, children, className, hasShadow = false, rounded = true, ...rest}: RiverVisualBaseProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.River__visual,\n          hasShadow && styles['River__visual--has-shadow'],\n          fillMedia && styles['River__visual--fill-media'],\n          rounded && styles['River__visual--rounded'],\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nconst Visual = forwardRef<HTMLDivElement, RiverVisualProps>(\n  ({className, position = 'default', padding = 'default', ...rest}, ref) => (\n    <RiverVisualBase\n      ref={ref}\n      className={clsx(\n        position !== 'default' && styles[`River__visual--position-${position}`],\n        padding !== 'default' && styles[`River__visual--padding-${padding}`],\n        className,\n      )}\n      {...rest}\n    />\n  ),\n)\n\n/**\n * Alternating text and image pairs.\n */\nexport const River = Object.assign(Root, {Visual, Content: RiverContent})\n"],"mappings":";;;;;;;;;;;;;;AAoDA,IAAa,IAA6B,SAC7B,IAAoB,SACpB,IAAoC,WAO3C,IAAO,GAET,EACE,YACA,oBAAiB,GACjB,WAAQ,GACR,aAAU,GACV,cACA,aACA,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,EAAC,QAAQ,GAAa,SAAS,MAAgB,EAAM,SAAS,QAAQ,EAAS,CAAC,QACnF,GAAK,OACA,EAAM,eAAe,EAAM,IAAI,OAAO,EAAM,QAAS,aACnD,EAAM,SAAS,MACjB,EAAI,SAAS,IAEX,EAAM,SAAS,MACjB,EAAI,UAAU,KAGX,IAET;EAAC,QAAQ;EAAM,SAAS;EAAK,CAC9B,EAEK,IAAiB,GAAa,MAAM,YAAY,WAChD,IAAgB,GAAa,MAAM,WAAW;AAMpD,EAL8B,MAAmB,aACpB,MAAkB,cAET,MAAY,eAAA,QAAA,IAAA,aAKtB,iBAAA,QAAA,IAAA,aAA0C,WAGpE,QAAQ,KACN,sHAAsH,EAAe,iBAAiB,EAAc,IACrK;CAGH,IAAM,IAA+B,IACjC,EAAM,aAAa,GAAa,EAC9B,WAAW,EACT,EAAY,MAAM,WAClB,MAAY,cAAc,EAAO,iCAClC,EACF,CAAC,GACF;AAEJ,QACE,kBAAC,WAAD;EACO;EACL,WAAW,EACT,EAAO,OACP,EAAO,UAAU,EAAe,QAAQ,KAAK,IAAI,KACjD,EAAO,gBAAgB,MACvB,EAAO,kBAAkB,MACzB,MAAY,cAAc,EAAe,UACzC,GACA,EACD;EACD,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAZN,CAcG,GACA,EACO;;EAGf,EAkCY,IAAe,GAExB,EACE,WAAQ,UACR,YACA,aACA,cACA,kBAAkB,GAClB,mBAAmB,GACnB,8BAA2B,IAC3B,UACA,GAAG,KAEL,MACG;CACH,IAAM,EAAC,SAAS,GAAkB,QAAQ,MAAyB,EAAa,EAAQ,EAElF,IAAW,QAAc,EAAM,SAAS,QAAQ,EAAS,EAAE,CAAC,EAAS,CAAC,EAEtE,IAAe,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAQ,EAE5F,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAY,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAK,EAEtF,IAAa,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAM,EAExF,IAAmB,EAAS,MAAK,MAAS,EAAM,eAAe,EAAM,IAAI,EAAM,SAAS,EAAY;AAE1G,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EAAK,GAAkB,EAAO,gBAAgB,EAAO,yBAAyB,MAAU,EAAU;EAC7G,OAAO;GAAC,GAAG;GAAuB,GAAG;GAAM;EAC3C,GAAI;YAJN;GAMG,EAAM,eAAe,EAAW,IAAI,CAAC,KACpC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA8C,EAAE,CAAC;IACjE,CAAA;GAGP,CAAC,KAAc,EAAM,eAAe,EAAiB,IAAI,CAAC,KACzD,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAe;IAAuB,CAAA;GAG9D,CAAC,KAAc,CAAC,KAAoB,KACnC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,GAAD,EAAoB,CAAA;IAChB,CAAA;GAGP,EAAM,eAA6B,EAAa,IAC/C,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAAkD;KAEpE,IAAI,EAAa,MAAM,MAAM;KAC7B,MAAM,EAAa,MAAM,QAAQ;KACjC,QAAQ,EAAa,MAAM;KAC3B,WAAW,EAAK,EAAa,MAAM,WAAW,EAAO,wBAAwB;KAC9E,CAAC;IACE,CAAA;GAGP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,SAAS;KACT,IAAI;KACJ,WAAW,EAAK,EAAO,aAAa,EAAU,MAAM,UAAU;KAC/D,CAAC;IACE,CAAA;GAEP,EAAM,eAA0B,EAAU,IACzC,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAM,aAAa,GAA4C;KAC9D,MAAM;KACN,SAAS,EAAU,MAAM,WAAW;KACrC,CAAC;IACE,CAAA;GAEP,KACC,kBAAC,OAAD;IACE,WAAW,EACT,EAAO,0BACP,KAA4B,EAAO,qCACpC;cAED,kBAAC,GAAD,EAAqB,CAAA;IACjB,CAAA;GAEJ;;EAGX,EAEY,IAA6B;CACxC;CACA;CACA;CACA;CACA;CACD,EAGY,IAA4B;CAAC;CAAW;CAAQ;CAAM,EAkCtD,IAAkB,GAE3B,EAAC,eAAY,IAAM,aAAU,cAAW,eAAY,IAAO,aAAU,IAAM,GAAG,KAC9E,MAGE,kBAAC,OAAD;CACO;CACL,WAAW,EACT,EAAO,eACP,KAAa,EAAO,8BACpB,KAAa,EAAO,8BACpB,KAAW,EAAO,2BAClB,EACD;CACD,GAAI;CAEH;CACG,CAAA,CAGX,EAEK,IAAS,GACZ,EAAC,cAAW,cAAW,WAAW,aAAU,WAAW,GAAG,KAAO,MAChE,kBAAC,GAAD;CACO;CACL,WAAW,EACT,MAAa,aAAa,EAAO,2BAA2B,MAC5D,MAAY,aAAa,EAAO,0BAA0B,MAC1D,EACD;CACD,GAAI;CACJ,CAAA,CAEL,EAKY,IAAQ,OAAO,OAAO,GAAM;CAAC;CAAQ,SAAS;CAAa,CAAC"}

package/esm/river/RiverStoryScroll/RiverStoryScroll.module-kez68wMZ.css

@@ -0,0 +1 @@
+.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--ease:cubic-bezier(.22, .56, .23, .89);-webkit-font-smoothing:antialiased;--stackDistance:calc(var(--base-size-24) * -1);--visualMaxWidth:1032px;--visualMaxWidthUL:1032;--visualMaxHeight:min(690px, 60vh);--visualMaxHeightUL:690;--storyScrollPadding:min(32px, 5vw);position:relative}@media (height<=720px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:55vh}}@media (height<=600px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:50vh}}@media (height<=500px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--visualMaxHeight:40vh}}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_{position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___3Fzq_{width:100%;position:absolute;left:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{z-index:10;border-radius:var(--brand-borderRadius-large);width:auto;margin-left:auto;margin-right:auto;display:block;position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_{grid-template-columns:1fr;gap:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_ img,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll--enabled___rZJ_t .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__internal-river___Z0U1_ video{display:none}@media (width<=542px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--topOffset:calc((100vh - min(664px, 60vh)) / 5)}}@media (width<=768px) and (height>=670px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--extraBottomSpacing:calc(-1 * (100vh - 100vw) / 5)}}@media (width>=542px) and (width<=1028px) and (height>=670px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--extraBottomSpacing:calc(-1 * (100vh - 100vw) / 3)}}@media (width>=542px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--scrollTextHeight:42vh}}@media (height<=520px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--scrollTextHeight:70vh}}@media (width>=1028px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-30px}}@media (height<=800px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-20px}}@media (height<=500px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--stackDistance:-15px}}@media screen and (width<=768px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{--topOffset:calc((100vh - min(664px, 60vh)) / 3);--availableWidth:calc(100vw - var(--storyScrollPadding) * 2);--relativeVisualHeight:calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));--visualHeight:min(var(--visualMaxHeight), var(--relativeVisualHeight));--visualWidth:calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));--scrollTextHeight:58vh;--textToVisualPadding:max(5vh, 40px);--topScrollOffset:calc(var(--visualHeight));--bottomScrollOffset:calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));--extraBottomSpacing:70px}@supports (height:100dvh){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy{height:100dvh}}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb{width:100%;height:100%;position:absolute;top:0;left:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{min-height:var(--scrollTextHeight);transition:opacity .3s var(--ease);position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:has(+.Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS){opacity:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__in-viewport___QNWnS+.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{opacity:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{max-width:calc(1032px + var(--storyScrollPadding) * 2);padding-right:var(--storyScrollPadding);padding-left:var(--storyScrollPadding);margin-top:min(30vw,22vh);margin-left:auto;margin-right:auto}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:var(--topScrollOffset);padding-bottom:var(--bottomScrollOffset)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{width:100%;height:auto;max-width:var(--visualWidth);border-radius:var(--brand-borderRadius-large)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy{pointer-events:none;padding-top:var(--topOffset);margin-top:calc(-1 * var(--topOffset));z-index:1;flex-direction:column;height:100vh;display:flex;position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917{background-image:linear-gradient(180deg, var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px), transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)), transparent 93%, var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917 .Primer_Brand__RiverStoryScroll-module__story-scroll-text___fiWO6{margin-top:var(--base-size-40)}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{opacity:0;display:none}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:nth-child(2){opacity:1;display:block}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd{transition:.5s var(--ease) transform, .5s var(--ease) filter, .5s var(--ease) opacity;pointer-events:auto}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(~.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){margin-left:auto;margin-right:auto;display:block;position:absolute;left:0;right:0}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{transform:translateY(calc(var(--stackDistance) * -1)) scale(1.015);margin-left:auto;margin-right:auto;display:block;position:absolute;left:0;right:0}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(var(--stackDistance)) scale(.95);filter:brightness(70%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 2)) scale(.9);filter:brightness(50%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 3)) scale(.85);filter:brightness(30%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4:has(+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4+.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh){transform:translateY(calc(var(--stackDistance) * 4)) scale(.8);filter:brightness(10%);opacity:1}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh{display:block;position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy{padding-top:var(--textToVisualPadding);top:calc(var(--topOffset) + var(--visualHeight));position:sticky}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:last-child .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-stack___LUJFy{height:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs{gap:var(--base-size-4);left:calc(var(--base-size-20) * -1 - 2px);height:var(--visualHeight);margin:auto;flex-direction:column;justify-content:center;margin-block-start:calc(var(--base-size-20) * -1);display:flex;position:absolute;right:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe{border-radius:var(--brand-borderRadius-large);opacity:.55;background:var(--brand-RiverStoryScroll-pagination-fgColor);width:6px;height:6px;transition:opacity var(--brand-animation-duration-default) var(--ease), height var(--brand-animation-duration-default) var(--ease)}.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(2)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:first-child,.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(3)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(2),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(4)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(3),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(5)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(4),.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh:nth-child(6)~.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination___N3Qqs .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__pagination-dot___K1RGe:nth-child(5){opacity:1;height:var(--base-size-24)}}@media screen and (width>=768px){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_{grid-gap:var(--base-size-24);gap:var(--base-size-24);grid-template-columns:1fr 1fr;display:grid}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container___F1VHb{order:2;align-items:center;width:100%;height:80vh;display:flex;position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__image___SlwET{width:100%}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd{width:100%;transition:opacity .3s var(--ease);padding-top:10vh;position:sticky;top:0;right:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-container-inner___6xmBy.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual--below___E8917{position:sticky;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd.Primer_Brand__RiverStoryScroll-module__tracker-outside-viewport___QV3v4{z-index:-1;opacity:0;position:absolute;top:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-scroll-responder___AqOJd.Primer_Brand__RiverStoryScroll-module__tracker-in-viewport___oZzIh{z-index:1;opacity:1}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:10vh}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU .Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{padding:20vh 0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{position:relative}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i{filter:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_{filter:blur(1px);transition:filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default)}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i:after{content:"";transition:opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default), visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);opacity:0;visibility:hidden;background-color:var(--brand-RiverStoryScroll-content-inactive-bgColor);position:absolute;inset:0}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__tracker___Xrp6i.Primer_Brand__RiverStoryScroll-module__outside-viewport___d_yN_:after{opacity:.7;visibility:visible}}@media screen and (width>=768px) and (height>=900px) and (prefers-reduced-motion:no-preference){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC{margin-top:-20vh}.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container___8f_JH.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__content-container--below___wHtLU{padding-top:16vh}}@media (prefers-reduced-motion:reduce){.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC:before,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC:after,.Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/river/RiverStoryScroll/RiverStoryScroll.module.js

@@ -1,4 +1,4 @@
-import './RiverStoryScroll.module-D8dFaLHq.css';var e = {
+import './RiverStoryScroll.module-kez68wMZ.css';var e = {
 	RiverStoryScroll: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll___1WYYC",
 	RiverStoryScroll__inner: "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__inner___WF5b_",
 	"RiverStoryScroll__visual-cover": "Primer_Brand__RiverStoryScroll-module__RiverStoryScroll__visual-cover___3Fzq_",

package/esm/river/RiverStoryScroll/RiverStoryScroll.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"RiverStoryScroll.module.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScroll.module.css"],"sourcesContent":[".RiverStoryScroll {\n  --ease: cubic-bezier(0.22, 0.56, 0.23, 0.89);\n  -webkit-font-smoothing: antialiased;\n  --stackDistance: calc(var(--base-size-24) * -1);\n\n  /* River visual (videos)\n  * UL = unit-less, needed for division in certain scenarios\n  */\n  --visualMaxWidth: 1032px;\n  --visualMaxWidthUL: 1032;\n  --visualMaxHeight: min(690px, 60vh);\n  --visualMaxHeightUL: 690;\n  --storyScrollPadding: min(32px, 5vw);\n  position: relative;\n}\n@media (max-height: 720px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 55vh;\n  }\n}\n\n@media (max-height: 600px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 50vh;\n  }\n}\n\n@media (max-height: 500px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 40vh;\n  }\n}\n\n.RiverStoryScroll__inner {\n  position: relative;\n}\n\n.RiverStoryScroll__visual-cover {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.RiverStoryScroll__image {\n  margin-left: auto;\n  margin-right: auto;\n  width: auto;\n  z-index: 10;\n  position: relative;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river {\n  grid-template-columns: 1fr;\n  gap: 0;\n}\n\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river img,\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river video {\n  display: none;\n}\n\n@media (max-width: 542px) {\n  .RiverStoryScroll {\n    --topOffset: calc((100vh - min(664px, 60vh)) / 5);\n  }\n}\n\n@media (max-width: 768px) and (min-height: 670px) {\n  .RiverStoryScroll {\n    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 5);\n  }\n}\n\n@media (min-width: 542px) and (max-width: 1028px) and (min-height: 670px) {\n  .RiverStoryScroll {\n    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 3);\n  }\n}\n\n@media (min-width: 542px) {\n  .RiverStoryScroll {\n    --scrollTextHeight: 42vh;\n  }\n}\n\n@media (max-height: 520px) {\n  .RiverStoryScroll {\n    --scrollTextHeight: 70vh;\n  }\n}\n\n@media (min-width: 1028px) {\n  .RiverStoryScroll {\n    --stackDistance: -30px;\n  }\n}\n\n@media (max-height: 800px) {\n  .RiverStoryScroll {\n    --stackDistance: -20px;\n  }\n}\n\n@media (max-height: 500px) {\n  .RiverStoryScroll {\n    --stackDistance: -15px;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .RiverStoryScroll {\n    --topOffset: calc((100vh - min(664px, 60vh)) / 3);\n\n    /* Spacing above the visual */\n    --availableWidth: calc(100vw - var(--storyScrollPadding) * 2);\n    --relativeVisualHeight: calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));\n    --visualHeight: min(var(--visualMaxHeight), var(--relativeVisualHeight));\n    --visualWidth: calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));\n    --scrollTextHeight: 58vh;\n    --textToVisualPadding: max(5vh, 40px);\n\n    --topScrollOffset: calc(var(--visualHeight));\n    --bottomScrollOffset: calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));\n\n    --extraBottomSpacing: 70px;\n  }\n\n  /* Enhanced styling if dvh is supported */\n  @supports (height: 100dvh) {\n    .RiverStoryScroll__visual-container-inner {\n      height: 100dvh;\n    }\n  }\n\n  .RiverStoryScroll__visual-container {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .RiverStoryScroll__tracker {\n    min-height: var(--scrollTextHeight);\n    position: relative;\n    transition: opacity 0.3s var(--ease);\n  }\n\n  .RiverStoryScroll__tracker:has(+ .in-viewport) {\n    opacity: 0;\n  }\n\n  .RiverStoryScroll__tracker.in-viewport + .outside-viewport {\n    opacity: 0;\n  }\n\n  .RiverStoryScroll {\n    max-width: calc(1032px + var(--storyScrollPadding) * 2);\n    margin-top: min(30vw, 22vh);\n    margin-left: auto;\n    margin-right: auto;\n    padding-right: var(--storyScrollPadding);\n    padding-left: var(--storyScrollPadding);\n  }\n\n  .RiverStoryScroll__content-container--below {\n    padding-top: var(--topScrollOffset);\n    padding-bottom: var(--bottomScrollOffset);\n  }\n\n  .RiverStoryScroll__image {\n    height: auto;\n    width: 100%;\n    max-width: var(--visualWidth);\n    border-radius: var(--brand-borderRadius-large);\n  }\n\n  .RiverStoryScroll__visual-container-inner {\n    position: sticky;\n    pointer-events: none;\n    top: 0;\n    padding-top: var(--topOffset);\n    margin-top: calc(-1 * var(--topOffset));\n    display: flex;\n    z-index: 1;\n    flex-direction: column;\n    height: 100vh;\n  }\n\n  .RiverStoryScroll__visual--below {\n    background-image: linear-gradient(\n      180deg,\n      var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px),\n      transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)),\n      transparent 93%,\n      var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%\n    );\n  }\n\n  .RiverStoryScroll__visual--below .story-scroll-text {\n    margin-top: var(--base-size-40);\n  }\n\n  .tracker-outside-viewport {\n    opacity: 0;\n    display: none;\n  }\n\n  /* Show first visual, even when nothing is visible */\n  .tracker-outside-viewport:nth-child(2) {\n    opacity: 1;\n    display: block;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder {\n    transition: 0.5s var(--ease) transform, 0.5s var(--ease) filter, 0.5s var(--ease) opacity;\n    pointer-events: auto;\n  }\n\n  .tracker-outside-viewport:has(~ .tracker-in-viewport) {\n    position: absolute;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    left: 0;\n    right: 0;\n  }\n\n  .tracker-in-viewport + .tracker-outside-viewport {\n    transform: translateY(calc(var(--stackDistance) * -1)) scale(1.015);\n    position: absolute;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    left: 0;\n    right: 0;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-in-viewport) {\n    transform: translateY(var(--stackDistance)) scale(0.95);\n    filter: brightness(70%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-in-viewport) {\n    transform: translateY(calc(var(--stackDistance) * 2)) scale(0.9);\n    filter: brightness(50%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport) {\n    transform: translateY(calc(var(--stackDistance) * 3)) scale(0.85);\n    filter: brightness(30%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(\n      + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport\n    ) {\n    transform: translateY(calc(var(--stackDistance) * 4)) scale(0.8);\n    filter: brightness(10%);\n    opacity: 1;\n  }\n\n  .tracker-in-viewport {\n    display: block;\n    position: relative;\n  }\n\n  /* \n    TODO: Re-enable these at a later date\n    \n    .video-controls {\n      --distanceFromEdge: 12px;\n      position: absolute;\n      right: calc((100% - var(--visualWidth)) / 2 + var(--distanceFromEdge));\n      bottom: var(--distanceFromEdge);\n      z-index: 10;\n      pointer-events: auto;\n      transition: opacity 0.3s var(--ease);\n      opacity: 0;\n    }\n\n    @media (min-width: 542px) {\n      .video-controls {\n        --distanceFromEdge: 20px;\n      }\n    }\n\n    .RiverStoryScroll__visual-scroll-responder:hover .video-controls,\n    .video-controls-ended {\n      opacity: 1;\n    }\n\n    .video-control {\n      background-color: rgba(0, 0, 0, 0.18);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 200px;\n      width: 44px;\n      height: 44px;\n      transition: background-color 0.2s ease;\n    }\n\n    .video-control:hover,\n    .video-control:focus {\n      background-color: rgba(0, 0, 0, 0.35);\n    } */\n\n  .RiverStoryScroll__content-stack {\n    position: sticky;\n    padding-top: var(--textToVisualPadding);\n    top: calc(var(--topOffset) + var(--visualHeight));\n  }\n\n  /* This is a hack to make the sticky behavior exclude the height of itself as it reaches the bottom */\n  /* This makes it possible to calculate the end of the sticky scroll without having to account for text content */\n  .RiverStoryScroll__tracker:last-child .RiverStoryScroll__content-stack {\n    height: 0;\n  }\n\n  .RiverStoryScroll__pagination {\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-4);\n    position: absolute;\n    left: calc(var(--base-size-20) * -1 - 2px);\n    right: 0;\n    margin: auto;\n    height: var(--visualHeight);\n    justify-content: center;\n    margin-block-start: calc(var(--base-size-20) * -1);\n  }\n\n  .RiverStoryScroll__pagination-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: var(--brand-borderRadius-large);\n    opacity: 0.55;\n    background: var(--brand-RiverStoryScroll-pagination-fgColor);\n    transition: opacity var(--brand-animation-duration-default) var(--ease),\n      height var(--brand-animation-duration-default) var(--ease);\n  }\n\n  .tracker-in-viewport:nth-child(2) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(1) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(3) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(2) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(4) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(3) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(5) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(4) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(6) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(5) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .RiverStoryScroll__inner {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--base-size-24);\n  }\n\n  .RiverStoryScroll__visual-container {\n    position: sticky;\n    width: 100%;\n    top: 0;\n    height: 80vh;\n    display: flex;\n    align-items: center;\n    order: 2;\n  }\n\n  .RiverStoryScroll__visual-container-inner,\n  .RiverStoryScroll__image {\n    width: 100%;\n  }\n\n  .RiverStoryScroll .RiverStoryScroll__visual-scroll-responder {\n    position: sticky;\n    top: 0;\n    width: 100%;\n    right: 0;\n    transition: opacity 0.3s var(--ease);\n    padding-top: 10vh;\n  }\n\n  .RiverStoryScroll__visual-container-inner.RiverStoryScroll__visual--below {\n    position: sticky;\n    top: 0;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder.tracker-outside-viewport {\n    position: absolute;\n    top: 0;\n    z-index: -1;\n    opacity: 0;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder.tracker-in-viewport {\n    z-index: 1;\n    opacity: 1;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {\n    padding-top: 10vh;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below .RiverStoryScroll__tracker {\n    padding: 20vh 0;\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport {\n    position: relative;\n  }\n\n  .RiverStoryScroll__tracker {\n    filter: 0;\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport {\n    filter: blur(1px);\n    transition: filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n  }\n\n  .RiverStoryScroll__tracker::after {\n    content: '';\n    transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n      visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n    opacity: 0;\n    visibility: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--brand-RiverStoryScroll-content-inactive-bgColor);\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport::after {\n    opacity: 0.7;\n    visibility: visible;\n  }\n}\n\n@media screen and (min-width: 768px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {\n  .RiverStoryScroll {\n    margin-top: -20vh;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {\n    padding-top: 16vh;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .RiverStoryScroll,\n  .RiverStoryScroll::before,\n  .RiverStoryScroll::after,\n  .RiverStoryScroll * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"RiverStoryScroll.module.js","names":[],"sources":["../../../src/river/RiverStoryScroll/RiverStoryScroll.module.css"],"sourcesContent":[".RiverStoryScroll {\n  --ease: cubic-bezier(0.22, 0.56, 0.23, 0.89);\n  -webkit-font-smoothing: antialiased;\n  --stackDistance: calc(var(--base-size-24) * -1);\n\n  /* River visual (videos)\n  * UL = unit-less, needed for division in certain scenarios\n  */\n  --visualMaxWidth: 1032px;\n  --visualMaxWidthUL: 1032;\n  --visualMaxHeight: min(690px, 60vh);\n  --visualMaxHeightUL: 690;\n  --storyScrollPadding: min(32px, 5vw);\n  position: relative;\n}\n@media (max-height: 720px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 55vh;\n  }\n}\n\n@media (max-height: 600px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 50vh;\n  }\n}\n\n@media (max-height: 500px) {\n  .RiverStoryScroll {\n    --visualMaxHeight: 40vh;\n  }\n}\n\n.RiverStoryScroll__inner {\n  position: relative;\n}\n\n.RiverStoryScroll__visual-cover {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.RiverStoryScroll__image {\n  display: block;\n  margin-left: auto;\n  margin-right: auto;\n  width: auto;\n  z-index: 10;\n  position: relative;\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river {\n  grid-template-columns: 1fr;\n  gap: 0;\n}\n\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river img,\n.RiverStoryScroll--enabled .RiverStoryScroll__internal-river video {\n  display: none;\n}\n\n@media (max-width: 542px) {\n  .RiverStoryScroll {\n    --topOffset: calc((100vh - min(664px, 60vh)) / 5);\n  }\n}\n\n@media (max-width: 768px) and (min-height: 670px) {\n  .RiverStoryScroll {\n    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 5);\n  }\n}\n\n@media (min-width: 542px) and (max-width: 1028px) and (min-height: 670px) {\n  .RiverStoryScroll {\n    --extraBottomSpacing: calc(-1 * (100vh - 100vw) / 3);\n  }\n}\n\n@media (min-width: 542px) {\n  .RiverStoryScroll {\n    --scrollTextHeight: 42vh;\n  }\n}\n\n@media (max-height: 520px) {\n  .RiverStoryScroll {\n    --scrollTextHeight: 70vh;\n  }\n}\n\n@media (min-width: 1028px) {\n  .RiverStoryScroll {\n    --stackDistance: -30px;\n  }\n}\n\n@media (max-height: 800px) {\n  .RiverStoryScroll {\n    --stackDistance: -20px;\n  }\n}\n\n@media (max-height: 500px) {\n  .RiverStoryScroll {\n    --stackDistance: -15px;\n  }\n}\n\n@media screen and (max-width: 768px) {\n  .RiverStoryScroll {\n    --topOffset: calc((100vh - min(664px, 60vh)) / 3);\n\n    /* Spacing above the visual */\n    --availableWidth: calc(100vw - var(--storyScrollPadding) * 2);\n    --relativeVisualHeight: calc(var(--visualMaxHeightUL) / var(--visualMaxWidthUL) * var(--availableWidth));\n    --visualHeight: min(var(--visualMaxHeight), var(--relativeVisualHeight));\n    --visualWidth: calc(var(--visualHeight) * var(--visualMaxWidthUL) / var(--visualMaxHeightUL));\n    --scrollTextHeight: 58vh;\n    --textToVisualPadding: max(5vh, 40px);\n\n    --topScrollOffset: calc(var(--visualHeight));\n    --bottomScrollOffset: calc(100vh - var(--topOffset) - var(--visualHeight) - var(--textToVisualPadding));\n\n    --extraBottomSpacing: 70px;\n  }\n\n  /* Enhanced styling if dvh is supported */\n  @supports (height: 100dvh) {\n    .RiverStoryScroll__visual-container-inner {\n      height: 100dvh;\n    }\n  }\n\n  .RiverStoryScroll__visual-container {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    left: 0;\n    top: 0;\n  }\n\n  .RiverStoryScroll__tracker {\n    min-height: var(--scrollTextHeight);\n    position: relative;\n    transition: opacity 0.3s var(--ease);\n  }\n\n  .RiverStoryScroll__tracker:has(+ .in-viewport) {\n    opacity: 0;\n  }\n\n  .RiverStoryScroll__tracker.in-viewport + .outside-viewport {\n    opacity: 0;\n  }\n\n  .RiverStoryScroll {\n    max-width: calc(1032px + var(--storyScrollPadding) * 2);\n    margin-top: min(30vw, 22vh);\n    margin-left: auto;\n    margin-right: auto;\n    padding-right: var(--storyScrollPadding);\n    padding-left: var(--storyScrollPadding);\n  }\n\n  .RiverStoryScroll__content-container--below {\n    padding-top: var(--topScrollOffset);\n    padding-bottom: var(--bottomScrollOffset);\n  }\n\n  .RiverStoryScroll__image {\n    height: auto;\n    width: 100%;\n    max-width: var(--visualWidth);\n    border-radius: var(--brand-borderRadius-large);\n  }\n\n  .RiverStoryScroll__visual-container-inner {\n    position: sticky;\n    pointer-events: none;\n    top: 0;\n    padding-top: var(--topOffset);\n    margin-top: calc(-1 * var(--topOffset));\n    display: flex;\n    z-index: 1;\n    flex-direction: column;\n    height: 100vh;\n  }\n\n  .RiverStoryScroll__visual--below {\n    background-image: linear-gradient(\n      180deg,\n      var(--brand-RiverStoryScroll-content-inactive-bgColor) calc(var(--topOffset) + var(--visualHeight) + 3px),\n      transparent calc(var(--topOffset) + var(--visualHeight) + var(--textToVisualPadding)),\n      transparent 93%,\n      var(--brand-RiverStoryScroll-content-inactive-bgColor) 99%\n    );\n  }\n\n  .RiverStoryScroll__visual--below .story-scroll-text {\n    margin-top: var(--base-size-40);\n  }\n\n  .tracker-outside-viewport {\n    opacity: 0;\n    display: none;\n  }\n\n  /* Show first visual, even when nothing is visible */\n  .tracker-outside-viewport:nth-child(2) {\n    opacity: 1;\n    display: block;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder {\n    transition: 0.5s var(--ease) transform, 0.5s var(--ease) filter, 0.5s var(--ease) opacity;\n    pointer-events: auto;\n  }\n\n  .tracker-outside-viewport:has(~ .tracker-in-viewport) {\n    position: absolute;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    left: 0;\n    right: 0;\n  }\n\n  .tracker-in-viewport + .tracker-outside-viewport {\n    transform: translateY(calc(var(--stackDistance) * -1)) scale(1.015);\n    position: absolute;\n    display: block;\n    margin-left: auto;\n    margin-right: auto;\n    left: 0;\n    right: 0;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-in-viewport) {\n    transform: translateY(var(--stackDistance)) scale(0.95);\n    filter: brightness(70%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-in-viewport) {\n    transform: translateY(calc(var(--stackDistance) * 2)) scale(0.9);\n    filter: brightness(50%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(+ .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport) {\n    transform: translateY(calc(var(--stackDistance) * 3)) scale(0.85);\n    filter: brightness(30%);\n    opacity: 1;\n  }\n\n  .tracker-outside-viewport:has(\n      + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-outside-viewport + .tracker-in-viewport\n    ) {\n    transform: translateY(calc(var(--stackDistance) * 4)) scale(0.8);\n    filter: brightness(10%);\n    opacity: 1;\n  }\n\n  .tracker-in-viewport {\n    display: block;\n    position: relative;\n  }\n\n  /* \n    TODO: Re-enable these at a later date\n    \n    .video-controls {\n      --distanceFromEdge: 12px;\n      position: absolute;\n      right: calc((100% - var(--visualWidth)) / 2 + var(--distanceFromEdge));\n      bottom: var(--distanceFromEdge);\n      z-index: 10;\n      pointer-events: auto;\n      transition: opacity 0.3s var(--ease);\n      opacity: 0;\n    }\n\n    @media (min-width: 542px) {\n      .video-controls {\n        --distanceFromEdge: 20px;\n      }\n    }\n\n    .RiverStoryScroll__visual-scroll-responder:hover .video-controls,\n    .video-controls-ended {\n      opacity: 1;\n    }\n\n    .video-control {\n      background-color: rgba(0, 0, 0, 0.18);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 200px;\n      width: 44px;\n      height: 44px;\n      transition: background-color 0.2s ease;\n    }\n\n    .video-control:hover,\n    .video-control:focus {\n      background-color: rgba(0, 0, 0, 0.35);\n    } */\n\n  .RiverStoryScroll__content-stack {\n    position: sticky;\n    padding-top: var(--textToVisualPadding);\n    top: calc(var(--topOffset) + var(--visualHeight));\n  }\n\n  /* This is a hack to make the sticky behavior exclude the height of itself as it reaches the bottom */\n  /* This makes it possible to calculate the end of the sticky scroll without having to account for text content */\n  .RiverStoryScroll__tracker:last-child .RiverStoryScroll__content-stack {\n    height: 0;\n  }\n\n  .RiverStoryScroll__pagination {\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-size-4);\n    position: absolute;\n    left: calc(var(--base-size-20) * -1 - 2px);\n    right: 0;\n    margin: auto;\n    height: var(--visualHeight);\n    justify-content: center;\n    margin-block-start: calc(var(--base-size-20) * -1);\n  }\n\n  .RiverStoryScroll__pagination-dot {\n    width: 6px;\n    height: 6px;\n    border-radius: var(--brand-borderRadius-large);\n    opacity: 0.55;\n    background: var(--brand-RiverStoryScroll-pagination-fgColor);\n    transition: opacity var(--brand-animation-duration-default) var(--ease),\n      height var(--brand-animation-duration-default) var(--ease);\n  }\n\n  .tracker-in-viewport:nth-child(2) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(1) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(3) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(2) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(4) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(3) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(5) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(4) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n\n  .tracker-in-viewport:nth-child(6) ~ .RiverStoryScroll__pagination .RiverStoryScroll__pagination-dot:nth-child(5) {\n    opacity: 1;\n    height: var(--base-size-24);\n  }\n}\n\n@media screen and (min-width: 768px) {\n  .RiverStoryScroll__inner {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: var(--base-size-24);\n  }\n\n  .RiverStoryScroll__visual-container {\n    position: sticky;\n    width: 100%;\n    top: 0;\n    height: 80vh;\n    display: flex;\n    align-items: center;\n    order: 2;\n  }\n\n  .RiverStoryScroll__visual-container-inner,\n  .RiverStoryScroll__image {\n    width: 100%;\n  }\n\n  .RiverStoryScroll .RiverStoryScroll__visual-scroll-responder {\n    position: sticky;\n    top: 0;\n    width: 100%;\n    right: 0;\n    transition: opacity 0.3s var(--ease);\n    padding-top: 10vh;\n  }\n\n  .RiverStoryScroll__visual-container-inner.RiverStoryScroll__visual--below {\n    position: sticky;\n    top: 0;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder.tracker-outside-viewport {\n    position: absolute;\n    top: 0;\n    z-index: -1;\n    opacity: 0;\n  }\n\n  .RiverStoryScroll__visual-scroll-responder.tracker-in-viewport {\n    z-index: 1;\n    opacity: 1;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {\n    padding-top: 10vh;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below .RiverStoryScroll__tracker {\n    padding: 20vh 0;\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport {\n    position: relative;\n  }\n\n  .RiverStoryScroll__tracker {\n    filter: 0;\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport {\n    filter: blur(1px);\n    transition: filter var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n  }\n\n  .RiverStoryScroll__tracker::after {\n    content: '';\n    transition: opacity var(--brand-animation-duration-extended) var(--brand-animation-easing-default),\n      visibility var(--brand-animation-duration-extended) var(--brand-animation-easing-default);\n    opacity: 0;\n    visibility: hidden;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--brand-RiverStoryScroll-content-inactive-bgColor);\n  }\n\n  .RiverStoryScroll__tracker.outside-viewport::after {\n    opacity: 0.7;\n    visibility: visible;\n  }\n}\n\n@media screen and (min-width: 768px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {\n  .RiverStoryScroll {\n    margin-top: -20vh;\n  }\n\n  .RiverStoryScroll__content-container.RiverStoryScroll__content-container--below {\n    padding-top: 16vh;\n  }\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  .RiverStoryScroll,\n  .RiverStoryScroll::before,\n  .RiverStoryScroll::after,\n  .RiverStoryScroll * {\n    animation: none !important;\n    transition: none !important;\n    scroll-behavior: auto !important;\n  }\n}\n"],"mappings":""}

package/esm/river/river-shared.module-5fefR7ip.css

@@ -0,0 +1 @@
+.Primer_Brand__river-shared-module__River___PCP5W{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);padding-inline:var(--brand-River-spacing-outerInline);padding-block:var(--brand-River-spacing-outerBlock);grid-auto-rows:min-content;display:grid;container-type:inline-size}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock);gap:var(--base-size-32);position:relative}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{gap:var(--base-size-28)}}@media screen and (width>=80rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__River--align-center___4igQp{text-align:center}.Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River__visual___s4zuj img,.Primer_Brand__river-shared-module__River__visual___s4zuj picture{display:block}.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy img,.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy picture,.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy video{-o-object-fit:cover;object-fit:cover;width:100%;height:100%}.Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:var(--brand-borderRadius-large);overflow:hidden}.Primer_Brand__river-shared-module__River__visual--has-shadow___5__Jy{box-shadow:var(--brand-River-visual-shadow)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{background-color:var(--brand-color-canvas-subtle);padding:var(--brand-River-variant-gridline-visual-padding);margin-inline:calc(-1 * var(--brand-River-variant-gridline-spacing-outerInline));border-radius:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-radius:var(--brand-borderRadius-large);width:auto;max-width:100%;height:auto}@media screen and (width<=47.99rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{justify-content:flex-end;align-items:flex-end;padding-block-end:0;padding-inline-end:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:0}}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__River___PCP5W{max-width:618px;margin-inline:auto}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{align-items:flex-end;padding-block-end:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA img,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA picture,.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA video{border-end-end-radius:0;border-end-start-radius:0}}.Primer_Brand__river-shared-module__River__heading___e5fwB{margin-bottom:var(--brand-River-heading-margin)}.Primer_Brand__river-shared-module__River__call-to-action___yOsJI{margin-top:var(--base-size-24)}.Primer_Brand__river-shared-module__River__text___HCqnL strong,.Primer_Brand__river-shared-module__River__text___HCqnL b{font-weight:var(--base-text-weight-normal);color:var(--brand-color-text-default)}.Primer_Brand__river-shared-module__River__heading___e5fwB code,.Primer_Brand__river-shared-module__River__text___HCqnL code{font-size:inherit;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);font-family:var(--brand-fontStack-monospace)!important}.Primer_Brand__river-shared-module__River__text___HCqnL code{padding:var(--base-size-2) var(--base-size-4) 0}.Primer_Brand__river-shared-module__River__heading-inner___XAylb:has(code){line-height:1.8lh}@media screen and (width>=64rem){.Primer_Brand__river-shared-module__River__heading-inner___XAylb:has(code){line-height:2.1lh}}.Primer_Brand__river-shared-module__River__text___HCqnL:has(code){line-height:1.1lh}.Primer_Brand__river-shared-module__River__leadingComponent___J27K0 img,.Primer_Brand__river-shared-module__River__leadingComponent___J27K0 picture,.Primer_Brand__river-shared-module__River__trailingComponent___jDuou img,.Primer_Brand__river-shared-module__River__trailingComponent___jDuou picture{display:block}.Primer_Brand__river-shared-module__River__trailingComponent___jDuou{margin-block-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-block-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River__label___ENXiR{margin-block-end:var(--brand-River-label-margin)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__visual___s4zuj{order:1}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__content___udxiD{order:2}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__content___udxiD{order:1}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__visual___s4zuj{order:2}@media screen and (width<=63.24rem){.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-start:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-end:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-block-start:calc(-1 * var(--brand-River-variant-gridline-spacing-outerBlock))}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__River___PCP5W{grid-template-rows:initial}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin:0}.Primer_Brand__river-shared-module__River__content___udxiD{order:initial}.Primer_Brand__river-shared-module__River--50-50___37Rpp{grid-template-columns:[content]1fr[visual]1fr}.Primer_Brand__river-shared-module__River--60-40___3M2aV{grid-template-columns:[content]4fr[visual]6fr}.Primer_Brand__river-shared-module__River--align-start___PjR7w{grid-template-areas:"content visual"}.Primer_Brand__river-shared-module__River--align-end___PI17m{grid-template-areas:"visual content"}.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--60-40___3M2aV{grid-template-columns:[visual]6fr[content]4fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-inline-start:calc(var(--base-size-80) + var(--base-size-8))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-inline-end:calc(var(--base-size-80) + var(--base-size-8))}.Primer_Brand__river-shared-module__River__content___udxiD{grid-area:content;align-content:center;display:grid}.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__body-text___K4T6H,.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__heading___e5fwB{max-width:400px}.Primer_Brand__river-shared-module__River--align-start___PjR7w:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--base-size-128)}.Primer_Brand__river-shared-module__River--align-end___PI17m:not(.Primer_Brand__river-shared-module__River--variant-gridline___e27QX) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-128)}.Primer_Brand__river-shared-module__River__content--align-block-end___w7f2E{align-content:end}.Primer_Brand__river-shared-module__River__visual___s4zuj{grid-area:visual}.Primer_Brand__river-shared-module__River--align-center___4igQp{grid-auto-rows:min-content;grid-template-columns:initial}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD,.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{grid-area:unset;justify-self:center}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__body-text___K4T6H{justify-self:center;max-width:600px}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-bottom:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD{margin-top:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){gap:0;padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:1fr 1fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV:not(.Primer_Brand__river-shared-module__River--align-center___4igQp):has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:560fr 676fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m.Primer_Brand__river-shared-module__River--60-40___3M2aV:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){grid-template-columns:676fr 560fr}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-64);padding-inline-end:var(--brand-River-spacing-inner);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:calc(var(--base-size-80) + var(--base-size-32))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV.Primer_Brand__river-shared-module__River--align-start___PjR7w:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--base-size-128)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--brand-River-spacing-inner);padding-inline-end:var(--base-size-64);padding-block:var(--brand-River-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:calc(var(--base-size-80) + var(--base-size-32))}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--60-40___3M2aV.Primer_Brand__river-shared-module__River--align-end___PI17m:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--base-size-128)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-start___PjR7w:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-end:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-end___PI17m:not(:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA)) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline-start:var(--brand-River-spacing-inner)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--50-50___37Rpp:not(.Primer_Brand__river-shared-module__River--align-center___4igQp) .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{margin-inline:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA){padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual--has-background___0wEBA{width:100%;margin:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__visual___s4zuj{margin-bottom:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp{gap:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp .Primer_Brand__river-shared-module__River__content___udxiD{margin-top:0;margin-bottom:var(--base-size-64)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX.Primer_Brand__river-shared-module__River--align-center___4igQp:has(.Primer_Brand__river-shared-module__River__visual--has-background___0wEBA) .Primer_Brand__river-shared-module__River__content___udxiD{padding-inline:var(--brand-River-variant-gridline-spacing-outerInline);padding-block-start:var(--brand-River-variant-gridline-spacing-outerBlock)}}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:center;align-items:center;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:center;align-items:flex-end;padding-block-end:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:flex-start;align-items:flex-end;padding-block-end:0;padding-inline-start:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9{padding:var(--brand-River-variant-gridline-visual-padding);border-radius:0;justify-content:flex-end;align-items:flex-end;padding-block-end:0;padding-inline-end:0;display:flex}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ{padding:var(--brand-River-variant-gridline-visual-padding)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5{border-radius:0;padding:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-center___DjITG [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 [data-video-player-container]{border-radius:0;width:auto;max-width:100%;height:auto}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ [data-video-player-container]{border-radius:0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-center___DjITG [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end____8UId [data-video-player-container]{border-radius:var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-start___u_Kc6 [data-video-player-container]{border-radius:0;border-start-end-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--position-block-end-inline-end___3KRp9 [data-video-player-container]{border-radius:0;border-start-start-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-all___rTBWZ [data-video-player-container]{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container]{-o-object-fit:cover;object-fit:cover;width:100%;max-width:none;height:100%}.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container],.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 img:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 picture:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 video:not(.Primer_Brand__river-shared-module__does-not-exist___GLvK6),.Primer_Brand__river-shared-module__River--variant-gridline___e27QX .Primer_Brand__river-shared-module__River__visual___s4zuj.Primer_Brand__river-shared-module__River__visual--rounded___noFTs.Primer_Brand__river-shared-module__River__visual--padding-none___4L9n5 [data-video-player-container]{border-radius:0}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F{gap:var(--brand-RiverBreakout-spacing-inner);flex-direction:column;padding-block-start:var(--brand-River-spacing-outerBlock);padding-block-end:var(--brand-River-spacing-outerBlock);display:flex}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL{max-width:37.5rem;color:var(--brand-color-text-default);font-size:var(--brand-text-size-500);font-weight:var(--brand-heading-weight-500);letter-spacing:var(--brand-heading-letterSpacing-500);line-height:var(--brand-text-lineHeight-500)}.Primer_Brand__river-shared-module__RiverBreakout--muted___ndl_I .Primer_Brand__river-shared-module__River__text___HCqnL{color:var(--brand-color-text-muted)}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL em,.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL b{color:var(--brand-color-text-default);font-style:normal;font-weight:inherit}.Primer_Brand__river-shared-module__RiverBreakout__hiddenHeading___wqngh{clip:rect(1px, 1px, 1px, 1px);border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{padding-block-start:var(--base-size-12)}@media screen and (width>=48rem){.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__content___udxiD{grid-gap:var(--brand-River-spacing-inner);gap:var(--brand-River-spacing-inner);grid-row-gap:var(--brand-River-spacing-innerY);row-gap:var(--brand-River-spacing-innerY);grid-template-columns:5fr 3fr;grid-template-areas:"text trailingComponent""cta trailingComponent";grid-auto-rows:auto 1fr;display:grid}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__text___HCqnL{grid-area:text}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{grid-area:cta;margin-block:0}.Primer_Brand__river-shared-module__RiverBreakout___Jcz2F .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{grid-area:trailingComponent;justify-self:flex-end;margin-block-start:0}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{padding-inline:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);gap:0;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:0;position:relative}@media screen and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{width:100%;max-width:38.625rem;margin-inline:auto}}@media screen and (width>=618px){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:none}}@media screen and (width>=1300px){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H{border-inline:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted)}}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual___s4zuj{overflow:hidden}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__visual--rounded___noFTs{border-radius:var(--brand-borderRadius-large)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{padding-block-start:var(--base-size-12)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);margin-inline:calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd);padding-inline:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline)}@media screen and (width>=48rem) and (width<=63.24rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{flex-direction:column;display:flex}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{margin-block-start:0}}@media screen and (width>=63.25rem){.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H:has(.Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35){padding-block-end:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__content___udxiD{grid-template-columns:1fr 31rem;grid-template-areas:"text trailingComponent""cta trailingComponent";grid-template-columns:1fr var(--brand-RiverBreakout-gridline-trailing-width,31rem);grid-gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);gap:var(--brand-RiverBreakout-variant-gridline-spacing-contentGap);flex:1;grid-template-rows:auto 1fr;padding-block:0;display:grid}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__text___HCqnL{grid-area:text;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__call-to-action___yOsJI{grid-area:cta;margin-block:0;padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent___jDuou{grid-area:trailingComponent;margin-block-start:0}.Primer_Brand__river-shared-module__RiverBreakout--variant-gridline___2_O5H .Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35{border-top:none;border-left:var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);padding-inline:0;padding-block:0;padding-inline-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerInline);align-self:stretch;margin-block:0;margin-inline:0;padding-block-start:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);padding-block-end:var(--brand-RiverBreakout-variant-gridline-spacing-outerBlockEnd)}}

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

@@ -1,8 +1,9 @@
-import './river-shared.module-fF58cowg.css';var e = {
+import './river-shared.module-5fefR7ip.css';var e = {
 	River: "Primer_Brand__river-shared-module__River___PCP5W",
 	"River--variant-gridline": "Primer_Brand__river-shared-module__River--variant-gridline___e27QX",
 	"River--align-center": "Primer_Brand__river-shared-module__River--align-center___4igQp",
 	River__content: "Primer_Brand__river-shared-module__River__content___udxiD",
+	River__visual: "Primer_Brand__river-shared-module__River__visual___s4zuj",
 	"River__visual--fill-media": "Primer_Brand__river-shared-module__River__visual--fill-media___aXDjy",
 	"River__visual--rounded": "Primer_Brand__river-shared-module__River__visual--rounded___noFTs",
 	"River__visual--has-shadow": "Primer_Brand__river-shared-module__River__visual--has-shadow___5__Jy",
@@ -11,11 +12,11 @@ import './river-shared.module-fF58cowg.css';var e = {
 	"River__call-to-action": "Primer_Brand__river-shared-module__River__call-to-action___yOsJI",
 	River__text: "Primer_Brand__river-shared-module__River__text___HCqnL",
 	"River__heading-inner": "Primer_Brand__river-shared-module__River__heading-inner___XAylb",
+	River__leadingComponent: "Primer_Brand__river-shared-module__River__leadingComponent___J27K0",
 	River__trailingComponent: "Primer_Brand__river-shared-module__River__trailingComponent___jDuou",
 	"River__trailingComponent--divider": "Primer_Brand__river-shared-module__River__trailingComponent--divider___mTL35",
 	River__label: "Primer_Brand__river-shared-module__River__label___ENXiR",
 	"River--align-start": "Primer_Brand__river-shared-module__River--align-start___PjR7w",
-	River__visual: "Primer_Brand__river-shared-module__River__visual___s4zuj",
 	"River--align-end": "Primer_Brand__river-shared-module__River--align-end___PI17m",
 	"River--50-50": "Primer_Brand__river-shared-module__River--50-50___37Rpp",
 	"River--60-40": "Primer_Brand__river-shared-module__River--60-40___3M2aV",

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@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(--brand-River-variant-gridline-visual-padding);\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 {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\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-24);\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    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/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n  padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n  padding: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual:is(\n    .River__visual--position-center,\n    .River__visual--position-block-end,\n    .River__visual--position-block-end-inline-start,\n    .River__visual--position-block-end-inline-end\n  )\n  :is(img, picture, video, [data-video-player-container]) {\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-center\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--fill-media.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  width: 100%;\n  max-width: none;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\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"],"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 :is(img, picture) {\n  display: block;\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(--brand-River-variant-gridline-visual-padding);\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 {\n    max-width: 618px;\n    margin-inline: auto;\n  }\n\n  .River--variant-gridline {\n    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n  }\n\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-24);\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__leadingComponent :is(img, picture),\n.River__trailingComponent :is(img, picture) {\n  display: block;\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    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/* Explicit visual media layouts override the responsive default without changing it. */\n.River--variant-gridline .River__visual.River__visual--position-center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-start {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-start;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--position-block-end-inline-end {\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  padding: var(--brand-River-variant-gridline-visual-padding);\n  padding-block-end: 0;\n  padding-inline-end: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-all {\n  padding: var(--brand-River-variant-gridline-visual-padding);\n}\n\n.River--variant-gridline .River__visual.River__visual--padding-none {\n  padding: 0;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual:is(\n    .River__visual--position-center,\n    .River__visual--position-block-end,\n    .River__visual--position-block-end-inline-start,\n    .River__visual--position-block-end-inline-end\n  )\n  :is(img, picture, video, [data-video-player-container]) {\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-center\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large) var(--brand-borderRadius-large) 0 0;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-start\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-end-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--position-block-end-inline-end\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\n  border-start-start-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-all\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: var(--brand-borderRadius-large);\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--fill-media.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  width: 100%;\n  max-width: none;\n  height: 100%;\n  object-fit: cover;\n}\n\n.River--variant-gridline\n  .River__visual.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]),\n.River--variant-gridline\n  .River__visual.River__visual--rounded.River__visual--padding-none\n  :is(img, picture, video, [data-video-player-container]) {\n  border-radius: 0;\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"],"mappings":""}