.formatto-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8rem 20rem;
  overflow: hidden;
  background: #f1f2f3;
}

.formatto-cta__background {
  position: absolute;
  top: -13.835625rem;
  left: 0;
  width: 120rem;
  height: 67rem;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: darken;
  opacity: 0.1;
  pointer-events: none;
}

.formatto-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 38.76rem;
  flex-direction: column;
  align-items: center;
  gap: 3.5rem;
  width: 38.76rem;
}

.formatto-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  text-align: center;
  word-break: break-word;
}

.formatto-cta__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  line-height: 1.2;
}

.formatto-cta__eyebrow,
.formatto-cta h2,
.formatto-cta__text p,
.formatto-cta__button {
  margin: 0;
  font-family: var(--font-body);
}

.formatto-cta__eyebrow {
  min-width: 100%;
  color: #00588a;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01rem;
}

.formatto-cta h2 {
  width: 30.4375rem;
  color: var(--color-blue-600);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025rem;
}

.formatto-cta__text p {
  width: 30.375rem;
  color: #002f4c;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01125rem;
}

.formatto-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 1.25rem 1.75rem;
  border-radius: 0.375rem;
  color: var(--color-blue-50);
  background: var(--color-blue-600);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01rem;
  white-space: nowrap;
  transition: opacity 180ms ease;
}

.formatto-cta__button img {
  width: 0.690625rem;
  height: 0.690625rem;
}

.formatto-cta__button:hover,
.formatto-cta__button:focus-visible {
  opacity: 0.86;
}

@media (min-width: 1367px) and (max-width: 1919px) {
  .formatto-cta {
    padding: 6.667vw 16.667vw;
  }
}

@media (max-width: 1919px) {
  .formatto-cta {
    padding: 6.667vw 16.667vw;
  }

  .formatto-cta__background {
    top: -11.53vw;
    width: 100vw;
    height: 55.833vw;
  }

  .formatto-cta__content {
    flex-basis: 32.3vw;
    gap: 2.917vw;
    width: 32.3vw;
  }

  .formatto-cta__text {
    gap: 2.083vw;
  }

  .formatto-cta__heading {
    gap: 1.25vw;
  }

  .formatto-cta__eyebrow {
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-cta h2 {
    width: 25.385vw;
    font-size: 2.083vw;
    letter-spacing: -0.021vw;
  }

  .formatto-cta__text p {
    width: 25.313vw;
    font-size: 0.938vw;
    letter-spacing: -0.009vw;
  }

  .formatto-cta__button {
    gap: 0.521vw;
    padding: 1.042vw 1.458vw;
    border-radius: 0.313vw;
    font-size: 0.833vw;
    letter-spacing: -0.008vw;
  }

  .formatto-cta__button img {
    width: 0.576vw;
    height: 0.576vw;
  }
}

@media (min-width: 1367px) and (max-width: 1919px) {
  .formatto-cta {
    padding-inline: 12vw;
  }

  .formatto-cta__content {
    flex-basis: 44vw;
    width: 44vw;
  }

  .formatto-cta__eyebrow,
  .formatto-cta__text p,
  .formatto-cta__button {
    font-size: clamp(16px, 0.938vw, 18px);
  }

  .formatto-cta h2 {
    width: 36vw;
    font-size: clamp(24px, 2.083vw, 40px);
  }

  .formatto-cta__text p {
    width: 36vw;
  }
}

@media (max-width: 1366px) {
  .formatto-cta__eyebrow,
  .formatto-cta__button {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-cta h2 {
    font-size: clamp(20px, 2.083vw, 40px);
  }

  .formatto-cta__text p {
    font-size: clamp(14px, 0.938vw, 18px);
  }

  .formatto-cta__button img {
    width: clamp(8px, 0.576vw, 11px);
    height: clamp(8px, 0.576vw, 11px);
  }
}

@media (max-width: 1024px) {
  .formatto-cta {
    padding-inline: 5vw;
  }

  .formatto-cta__content {
    flex-basis: 40.375vw;
    gap: 2.917vw;
    width: 40.375vw;
  }

  .formatto-cta__eyebrow {
    font-size: clamp(14px, 0.833vw, 16px);
  }

  .formatto-cta h2 {
    font-size: clamp(22px, 2.083vw, 40px);
  }

  .formatto-cta__text p,
  .formatto-cta__button {
    font-size: clamp(14px, 0.938vw, 18px);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .formatto-cta {
    min-height: 33.809vw;
    padding: 6.667vw 11.719vw;
  }

  .formatto-cta__background {
    top: -11.53vw;
    width: 100.035vw;
    height: 55.833vw;
  }

  .formatto-cta__content {
    flex-basis: 33.646vw;
    gap: 2.917vw;
    width: 33.646vw;
  }

  .formatto-cta__text {
    gap: 2.052vw;
  }

  .formatto-cta__heading {
    gap: 1.934vw;
  }

  .formatto-cta h2,
  .formatto-cta__text p {
    width: 25.313vw;
  }

  .formatto-cta__button {
    padding: 1.302vw 1.823vw;
    border-radius: 0.521vw;
  }
}

@media (max-width: 767px) {
  .formatto-cta {
    padding: 16.688vw 8.344vw;
  }

  .formatto-cta__background {
    top: -19.557vw;
    left: -88.657vw;
    width: 250.326vw;
    height: 139.896vw;
  }

  .formatto-cta__content {
    flex-basis: auto;
    gap: 8.344vw;
    width: 100%;
  }

  .formatto-cta__text {
    gap: 6.258vw;
  }

  .formatto-cta__heading {
    gap: 4.172vw;
  }

  .formatto-cta__eyebrow {
    font-size: 3.65vw;
    letter-spacing: -0.037vw;
  }

  .formatto-cta h2 {
    width: 100%;
    font-size: 7.301vw;
    letter-spacing: -0.073vw;
  }

  .formatto-cta__text p {
    width: 100%;
    font-size: 4.172vw;
    letter-spacing: -0.042vw;
  }

  .formatto-cta__button {
    gap: 2.608vw;
    padding: 4.172vw 5.215vw;
    border-radius: 1.565vw;
    font-size: 3.65vw;
    letter-spacing: -0.037vw;
  }

  .formatto-cta__button img {
    width: 2.884vw;
    height: 2.884vw;
  }
}

@media (min-width: 1409px) and (max-width: 1919px) {
  .formatto-cta {
    padding-right: calc((100vw - 80rem) / 2);
    padding-left: calc((100vw - 80rem) / 2);
  }
}

@media (min-width: 768px) and (max-width: 1408px) {
  .formatto-cta {
    padding: 9.084457vw 5vw;
  }

  .formatto-cta__background {
    top: -15.711143vw;
    width: 136.266856vw;
    height: 76.082328vw;
  }

  .formatto-cta__content {
    flex-basis: 44.014195vw;
    gap: 3.97445vw;
    width: 44.014195vw;
  }

  .formatto-cta__text {
    gap: 2.838893vw;
  }

  .formatto-cta__heading {
    gap: 1.703335vw;
  }

  .formatto-cta__eyebrow,
  .formatto-cta__button {
    font-size: 1.135557vw;
    letter-spacing: -0.011356vw;
  }

  .formatto-cta h2 {
    width: 34.56352vw;
    font-size: 2.838893vw;
    letter-spacing: -0.028389vw;
  }

  .formatto-cta__text > p {
    width: 34.492547vw;
    font-size: 1.277502vw;
    letter-spacing: -0.012775vw;
  }

  .formatto-cta__button {
    gap: 0.709723vw;
    padding: 1.419447vw 1.987225vw;
    border-radius: 0.425834vw;
  }

  .formatto-cta__button img {
    width: 0.784244vw;
    height: 0.784244vw;
  }
}

@media (max-width: 767px) {
  .formatto-cta {
    padding-right: 5vw;
    padding-left: 5vw;
  }
}

@media (min-width: 1409px) and (max-width: 1919px) {
  .formatto-cta__background {
    top: -13.835625rem;
    width: 120rem;
    height: 67rem;
  }

  .formatto-cta__content {
    flex-basis: 38.76rem;
    gap: 3.5rem;
    width: 38.76rem;
  }

  .formatto-cta__text {
    gap: 2.5rem;
  }

  .formatto-cta__heading {
    gap: 1.5rem;
  }

  .formatto-cta__eyebrow,
  .formatto-cta__button {
    font-size: 1rem;
    letter-spacing: -0.01rem;
  }

  .formatto-cta h2 {
    width: 30.4375rem;
    font-size: 2.5rem;
    letter-spacing: -0.025rem;
  }

  .formatto-cta__text > p {
    width: 30.375rem;
    font-size: 1.125rem;
    letter-spacing: -0.01125rem;
  }

  .formatto-cta__button {
    gap: 0.625rem;
    padding: 1.25rem 1.75rem;
    border-radius: 0.375rem;
  }

  .formatto-cta__button img {
    width: 0.690625rem;
    height: 0.690625rem;
  }
}