.cu-section {
  max-width: var(--cu-max-width-section, 1060px);
  margin: 0 auto;
}

.cu-section--wide {
  max-width: 100%;
}

.cu-section--gapless {
  --cu-grid-gap: 0;
  --cu-component-margin-top: 0;
  --cu-component-margin-bottom: 0;
}

.cu-section--gapless * {
  --cu-component-margin-top: initial;
  --cu-component-margin-bottom: initial;
}

.cu-section--gapless> :first-child {
  --cu-component-margin-top: 0;
}

.cu-section--gapless> :first-child>[class*='cu-']:first-of-type {
  --cu-component-margin-top: 0;
}

.cu-section[class*="cu-colorscheme"] {
  position: relative;
  padding: var(--cu-vr1) 0;
  background-color: transparent;
}

@media (min-width: 61rem) {
  .cu-section[class*="cu-colorscheme"] {
    padding: var(--cu-vr2) 0;
  }
}

.cu-section[class*="cu-colorscheme"] > * {
  /* This is required to give the heading and body a stacking context. Otherwise, the before pseudo element defined below will cover the content. */
  position: inherit;
}

/* Backgrounds on sections with colorschemes are always full bleed. This may cause horizontal scrollbars, so overflow-x: hidden may be needed on the body element. */
.cu-section[class*="cu-colorscheme"]::before {
  content: '';
  background-color: var(--cu-colorscheme-background);
  position: absolute;
  /* 100vw only works if the section is centered on the page, so we increase the width to cover for off-centered sections (for example, in columns). */
  width: 150vw;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -50vw;
}

.cu-section--framed:not([class*="cu-colorscheme"]) {
  position: relative;
  padding-top: 50px;
}

.cu-section--framed:not([class*="cu-colorscheme"])::before,
.cu-section--framed:not([class*="cu-colorscheme"])::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: var(--cu-text-color);
}

.cu-section--framed:not([class*="cu-colorscheme"])::before {
  width: 120px;
  height: 10px;
}

.cu-section--framed:not([class*="cu-colorscheme"])::after {
  width: 10px;
  height: 50px;
}

.cu-section--framed:not([class*="cu-colorscheme"]).cu-section--framed-right::before {
  left: calc(100% - 120px - 10px);
}

.cu-section--framed:not([class*="cu-colorscheme"]).cu-section--framed-right::after {
  left: calc(100% - 10px);
}

.cu-section__heading {
  margin-bottom: var(--cu-component-margin-bottom, var(--cu-vr2));
}

.cu-section--left > .cu-section__heading {
  margin-bottom: unset;
}

@media (min-width: 61rem) {
  .cu-section--left {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-flow: dense;
    column-gap: var(--cu-grid-gap, var(--cu-ps2));
  }

  .cu-section--left.cu-section--centered {
    align-items: center;
  }

  .cu-section--left > .cu_section__content {
    grid-column: 2;
  }

  .cu-section--left > .cu-section__heading {
    grid-column: 1;
    padding-bottom: 0;
  }
}

/* The following overrides are from the legacy Section Heading component. */
.cu-section__heading .cu-composite-heading__link {
  --cu-font-weight: 400;
  --cu-font-size: var(--cu-ms-2);
}

.cu-section__heading .cu-composite-heading__link:not(.cu-button) {
  --cu-text-color: var(--cu-colorscheme-accent);
}

.cu-text--2col {
  column-count: 2;
  column-gap: var(--cu-vr3);
}