.oc__container__cta-banner {
  container-type: inline-size;
  width: 100%;
}

.oc__block.oc__block__cta-banner {
  display: flex;
  flex-direction: column;
  gap: var(--oc--spacing--10);
  align-items: center;

  border-radius: 8px;
  margin: var(--oc--spacing--10);
  padding: var(--oc--spacing--30) var(--oc--spacing--20);
}

@container (min-width: 1280px) {
  .oc__block.oc__block__cta-banner {
    flex-direction: row;
    justify-content: center;
    gap: var(--oc--spacing--20);
    padding: var(--oc--spacing--20);
  }
}

.oc__block.oc__block__cta-banner--theme-red {
  background-color: var(--oc--color--red);
}

.oc__block.oc__block__cta-banner--theme-blue {
  background-color: var(--oc--color--bright-blue);
}

.oc__block__cta-banner
.oc__block__cta-banner__title
p {
  color: white;
  font-family: var(--oc--font-family--base);
  font-size: 38px;
  font-weight: 900;
  line-height: 112%;
}

@container (min-width: 1280px) {
  .oc__block__cta-banner
  .oc__block__cta-banner__title
  p {
    min-width: 240px;
  }
}

.oc__block__cta-banner
.oc__block__cta-banner__text {
  margin-bottom: var(--oc--spacing--10);
  color: white;
  font-family: var(--oc--font-family--base);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.36px;
  line-height: 168%;
}

@container (min-width: 1280px) {
  .oc__block__cta-banner
  .oc__block__cta-banner__text {
    margin-bottom: unset;
  }
}

.oc__block__cta-banner
.oc__block__cta-banner__button {
  display: grid;
  place-items: center;
}

@container (min-width: 1280px) {
  .oc__block__cta-banner
  .oc__block__cta-banner__button {
    min-width: 200px;
  }
}