@primer/react-brand/esm/BreakoutBanner/BreakoutBanner.module-DGBSJFNJ.css

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{max-width:var(--brand-breakpoint-xlarge);border-radius:var(--brand-borderRadius-large);background-repeat:no-repeat;background-color:var(--brand-BreakoutBanner-narrow-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-narrow-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-narrow-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:50%;background-position:var(--brand-BreakoutBanner-narrow-background-image-position,var(--brand-BreakoutBanner-background-image-position,center));width:100%;margin:0 auto;display:flex;position:relative}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{border-radius:var(--brand-borderRadius-xlarge);padding:var(--base-size-40) var(--base-size-24) var(--base-size-128);z-index:1;box-sizing:border-box;width:100%}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content___gZsEk{flex-direction:column;align-items:flex-start;display:flex}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container--background___Uex_J{background:var(--brand-BreakoutBanner-bgColor)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-content--center___oB7l0{text-align:center;align-items:center}.Primer_Brand__BreakoutBanner-module__BreakoutBanner__heading___9zftT{max-width:20ch}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-description___nFBHL{max-width:54ch;margin-block-start:var(--base-size-16)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-linkGroup___g_h1l{margin-block-start:var(--base-size-48)}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-leadingVisual___GRbZf{margin-block-end:var(--base-size-48)}@media screen and (width>=48rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-regular-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-regular-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-regular-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-regular-background-image-position,var(--brand-BreakoutBanner-background-image-position))}.Primer_Brand__BreakoutBanner-module__BreakoutBanner-container___JC9dt{padding:var(--base-size-48)}}@media screen and (width>=80rem){.Primer_Brand__BreakoutBanner-module__BreakoutBanner___QH5la{background-color:var(--brand-BreakoutBanner-wide-background-color,var(--brand-BreakoutBanner-background-color));background-image:var(--brand-BreakoutBanner-wide-background-image-src,var(--brand-BreakoutBanner-background-image-src));background-size:var(--brand-BreakoutBanner-wide-background-image-size,var(--brand-BreakoutBanner-background-image-size));background-position:var(--brand-BreakoutBanner-wide-background-image-position,var(--brand-BreakoutBanner-background-image-position))}}