.content-follow-modal {
  font-family: var(--font-family);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 20px;
  color: var(--general-green);
  text-align: center;

  @media (min-width: 590px) {
    gap: 20px;
  }
  @media (min-width: 430px) and (max-width: 589px) {
    gap: 16px;
  }
  @media (max-width: 429px) {
    gap: 12px;
  }

  @media (min-width: 960px) {
    height: auto;
  }
  @media (min-width: 590px) and (max-width: 959px) {
    height: calc(100vh - 52px);
  }
  @media (min-width: 430px) and (max-width: 589px) {
    height: calc(100vh - 48px);
  }
  @media (min-width: 320px) and (max-width: 429px) {
    height: calc(100vh - 36px);
  }
  @media (max-width: 319px) {
    height: calc(100vh - 32px);
  }
}

.follow-modal .new__modal__container {
  gap: 4px;
  justify-content: flex-start;
}

.follow-modal__icon {
  font-size: 28px;
  border-radius: 36px 36px 0px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--general-second-green);
  color: var(--general-green);

  @media (min-width: 1920px) {
    width: 84px;
    height: 68px;
  }
  @media (min-width: 430px) and (max-width: 1919px) {
    width: 70px;
    height: 58px;
  }
  @media (min-width: 320px) and (max-width: 429px) {
    width: 59px;
    height: 48px;
  }
  @media (max-width: 319px) {
    width: 50px;
    height: 40px;
  }
}

.follow-modal__icon i {
  @media (min-width: 1920px) {
    font-size: 26px;
  }
  @media (min-width: 430px) and (max-width: 1919px) {
    font-size: 20px;
  }
  @media (max-width: 429px) {
    font-size: 16px;
  }
}

.follow-modal__title {
  font-weight: 700;

  @media (min-width: 1920px) {
    font-size: 24px;
    line-height: 36px;
  }
  @media (min-width: 430px) and (max-width: 1919px) {
    font-size: 20px;
    line-height: 30px;
  }
  @media (max-width: 429px) {
    font-size: 18px;
    line-height: 27px;
  }
}

.follow-modal__text {
  font-weight: 450;

  @media (min-width: 430px) {
    font-size: 14px;
    line-height: 21px;
  }
  @media (max-width: 429px) {
    font-size: 12px;
    line-height: 18px;
  }
}

.follow-modal__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.follow-modal__controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  padding: 13px 23px;
  font-weight: 700;
  border-radius: 12px;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;

  @media (min-width: 420px) {
    font-size: 16px;
    line-height: 22px;
    height: 48px;
  }
  @media (max-width: 429px) {
    font-size: 14px;
    line-height: 19px;
    height: 44px;
  }
}

.follow-modal__cancel {
  color: var(--general-green);
  border: 1px solid var(--interface-colors-icons-color);
  background-color: transparent;
}

.follow-modal__cancel:hover {
  border-color: var(--brand-colors-dark-green);
}

.follow-modal__cancel:is(:active, :focus) {
  border-color: var(--brand-colors-dark-green);
  background-color: var(--hover-grey-full-block-grey);
}

.follow-modal__ok {
  color: var(--interface-colors-white);
  background-color: var(--brand-colors-dark-green);
  border: 1px solid var(--brand-colors-dark-green);
}

.follow-modal__ok:hover {
  box-shadow: 2px 4px 8px 0px #00000029;
}

.follow-modal__ok:is(:active, :focus) {
  background-color: var(--extra-dark-nav-part);
}