.cta-banner {
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  background-color: rgb(var(--color-main-blue-light));
  padding: var(--space-10) var(--space-2);
  text-align: center;
}

.banner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 730px;
}

.banner-header {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-h2);
  color: rgb(var(--color-white));
  margin: 0;
}

.banner-text p{
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-white));
  line-height: 150%;
  margin-block: 0;
}

/* Bare .banner-text rule (not just ".banner-text p") - the CTA Banner
   paragraph's own field_sub_text always self-wraps in <p> (Basic HTML
   format), but webform-confirmation--hotline.html.twig reuses this same
   class for a Webform confirmation message, which renders through the
   webform_default text format instead - that format applies zero filters
   and doesn't auto-wrap in <p>, so styling needs to apply regardless of
   whether the content happens to be paragraph-wrapped. See STYLE_GUIDE.md
   for why this deliberately isn't a <p> forced in the twig instead. */
.banner-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-white));
  line-height: 150%;
}

@media (max-width: 767px) {
  .cta-banner {
    padding: var(--space-5) var(--space-2);
  }

  .banner-header {
    font-size: 28px;
  }
}