.float-contact {
  display: inline;
}

.float-contact__floater {
  background-color: var(--color-midnight);
  color: var(--color-white);
  inline-size: 100vw;
  inset-block-end: -1rem;
  inset-inline-end: 0;
  margin-inline: auto;
  padding: var(--inner-container-padding);
  padding-block-end: calc(var(--inner-container-padding) + 1rem);
  position: sticky;
  transform: translateX(calc(var(--body-padding) * -1));
  z-index: z-index('float-contact');

  &::after {
    background-color: var(--color-midnight);
    block-size: 1rem;
    content: '';
    inline-size: 100vw;
    inset-block-end: 0;
    inset-inline-end: 100%;
    position: absolute;
    z-index: -1;
  }

  @include mq($from: 440px) {
    max-inline-size: 40rem;
    padding: 2.4rem;
    padding-block-end: 3.4rem;
    transform: translateX(calc((100vw - 100%) / 2));
  }
}

.float-contact__headline {
  margin-block-end: 2rem;

  @include use-responsive-sizing(--headline-font-size, responsive-map(xs 2rem, xl 2.6rem));
}

.float-contact__button {
  @include use-responsive-sizing(--icon-button-size, responsive-map(xs 3.6rem, xl 6.2rem));
  @include use-responsive-sizing(--icon-button-text-size, responsive-map(xs 1.6rem, xl 1.8rem));
}