.full-width-box {
  margin: var(--anrt-spacing-050);
  margin-bottom: var(--anrt-spacing-175);
  padding: var(--anrt-spacing-100) var(--anrt-spacing-050);
  color: var(--anrt-color-text);
  border-radius: var(--anrt-radius);
  background: transparent;

  .layout--onecol & {
    margin-inline: calc(-1 * var(--anrt-spacing-050));
  }

  @media (min-width: 64rem) {
    padding-block: var(--anrt-spacing-333);
  }
}

/* On dark background variants, make text and links white. */
.full-width-box:where(.full-width-box--black),
.full-width-box:where(.full-width-box--outline),
.full-width-box:where(.full-width-box--blue) {
  color: var(--anrt-color-white);

  :where(a:not(.button)) {
    color: var(--anrt-color-white);
  }
}

/* Black box variant */
.full-width-box:where(.full-width-box--black) {
  background: var(--anrt-color-black);

  :where(a) {
    text-decoration: none;

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }
}

/* Outline box variant */
.full-width-box:where(.full-width-box--outline) {
  border: 1px solid var(--anrt-color-white);
  background: transparent;
  padding-inline: calc(var(--anrt-spacing-100) - var(--anrt-spacing-tiny));
}

/* Off-white box variant */
.full-width-box:where(.full-width-box--off-white) {
  background: var(--anrt-color-grey-94);
}

/* Smoke white box variant */
.full-width-box:where(.full-width-box--smoke) {
  background: var(--anrt-color-grey-98);
}

/* Blue box variant */
.page--grey .full-width-box:where(.full-width-box--blue),
.full-width-box--light-bg .full-width-box:where(.full-width-box--blue) {
  background: var(--anrt-background-gradient-blue);
}

@media (min-width: 64rem) {
  .full-width-box {
    padding-right: var(--anrt-spacing-200);
    padding-left: var(--anrt-spacing-200);
  }
}