.paragraph--type--cta {
  background-color: var(--c-primary);
  position: relative;
  z-index: 1;
  color: var(--c-white);
}

.paragraph--type--cta::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  margin-left: calc(-50vw + 50%);
  transform: none;
  background-color: inherit;
}

.paragraph--type--cta h2 {
  margin-bottom: 32px;
}

.paragraph--type--cta .paragraph--cta--inner {
  padding-top: 48px;
  padding-bottom: 48px;
  max-width: 984px;
  margin-left: 0;
}

.block--inline-block--cta > .paragraph--type--cta .paragraph--cta--inner {
  padding-left: 0;
  padding-right: 0;
}

.paragraph--type--cta.has-bg {
  background-color: var(--c-black);
}

.paragraph--type--cta .media {
  z-index: -1;
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: calc(-50vw + 50%);
  padding-bottom: 0 !important;
  opacity: .8;
  max-width: none;
}

.paragraph--type--cta .field--type-string-long,
.paragraph--type--cta .text-formatted,
.paragraph--type--cta .simple-styleguide {
  color: inherit;
}

@media all and (min-width: 64rem) {
  .paragraph--type--cta .paragraph--cta--inner {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

@media all and (min-width: 80rem) {
  .paragraph--type--cta.has-bg .paragraph--cta--inner {
    padding-top: 160px;
    padding-bottom: 128px;
  }
}