<div className={styles.inputWrap}>
          <Input
            mode="primary"
            placeholder="Folder name"
            iconClassName={styles.xMarkIcon}
            value={""}
            icon="fa-light fa-search"
            onValueChange={() => {}}
          />
          <PopupOpener
            mode="click"
            placement="bottom-start"
            closeOnInteract={true}
            onOpen={() => setOpen(true)}
            onClose={() => setOpen(false)}
            content={openPaymentMenu()}
          >
            <div className={styles.paymentWrap}>
              <div className={styles.paymentTextWrap}>
                <Icon name="fal fa-dollar-sign" style={{ color: "#5807C9" }} />
                <span className={styles.paymentText}>
                  {paymentMethod === "salary" ? (
                    "Salary"
                  ) : paymentMethod === "stock" ? (
                    "Stock Options"
                  ) : paymentMethod === "volunteer" ? (
                    "Volunteer"
                  ) : paymentMethod === "after" ? (
                    "% After Project"
                  ) : (
                    <span className={styles.selectPayment}>Select payment</span>
                  )}
                </span>
              </div>
              <Icon
                name={isOpen ? "fal fa-chevron-down" : "fal fa-chevron-right"}
                style={{ color: "#5807C9", paddingRight: "1rem" }}
              />
            </div>
          </PopupOpener>
          <PopupOpener
            mode="click"
            placement="bottom-start"
            closeOnInteract={true}
            onOpen={() => setOpenTool(true)}
            onClose={() => setOpenTool(false)}
            content={openPaymentMenu()}
          >
            <div className={styles.devToolWrap}>
              <div className={styles.paymentTextWrap}>
                <Icon name="fal fa-dollar-sign" style={{ color: "#5807C9" }} />
                <span className={styles.paymentText}>
                  {paymentMethod === "salary" ? (
                    "Salary"
                  ) : paymentMethod === "stock" ? (
                    "Stock Options"
                  ) : paymentMethod === "volunteer" ? (
                    "Volunteer"
                  ) : paymentMethod === "after" ? (
                    "% After Project"
                  ) : (
                    <span className={styles.selectPayment}>
                      Development Tools
                    </span>
                  )}
                </span>
              </div>
              <Icon
                name={
                  isOpenTool ? "fal fa-chevron-down" : "fal fa-chevron-right"
                }
                style={{ color: "#5807C9", paddingRight: "1rem" }}
              />
            </div>
          </PopupOpener>
          <Button className={styles.btnSearch}>Search</Button>
        </div>
.inputWrap {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0rem 2rem 7rem 2rem;
  gap: 2rem;
}

.paymentWrap {
  width: 29.5rem;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f6f2fa;
  border-radius: 1.5rem;
  padding: 1.2rem;
  align-items: center;
}

.paymentTextWrap {
  padding-left: 1.5rem;
  margin-top: 0.3rem;
}
.paymentText {
  font-size: 1.7rem;
  color: #414044;
  padding-left: 1.5rem;
}

.selectPayment {
  font-size: 1.7rem;
  color: #b5b8bf;
}

.devToolWrap {
  width: 29.5rem;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f6f2fa;
  border-radius: 1.5rem;
  padding: 1.2rem;
  align-items: center;
}

.btnSearch {
  width: 29.5rem;
  max-width: 100%;
  display: flex;
  justify-content: center;
  border-radius: 1.5rem;
}

@media screen and (max-width: 970px) {
  .paymentWrap {
    width: 25rem;
    max-width: 100%;
  }
}
@media screen and (max-width: 760px) {
  .paymentWrap {
    display: none;
  }
}
i have two popup the issue they are not responsive. When I make screen smaller the size of popups should becomes smaller but somehow not becomming smaller because i set width 29.5rem, I want initial width should be 29.5 rem but it becomes smaller when I make screen smaller. How to do it ?