How do I get my modal to be position on top of my card rather than in the center of page?

Question

I'm new at coding and working on my first project. I was wondering if there is any way for my bootstrap 5 modal to pop up in front of each card I click on rather than in the middle of the page?

This is my current code:

    return (
        <div className="row p-5 m-2 ">
          {savedEpisodes?.map((saved) => {
            return (
              <div className="col-sm-2 " key={saved.episode.id}>
                <div
                  className="card "
                  data-bs-toggle="modal"
                  data-bs-target="#staticBackdrop"
                >
                  <button
                    className="x-icon"
                    onClick={() =>
                      deleteSavedEpisode({
                        id: saved.episode.id,
                        userId: userId,
                      })
                    }
                  >
                    X
                  </button>
                  <img
                    src={saved.episode.images[1].url}
                    alt="podcastimg"
                    className="card-img-top"
                  />
                  <div className="card-body">
                    <h5 className="card-title" style={{ textAlign: "center" }}>
                     
                      <span style={{ fontWeight: "bold", color: "white" }}>
                        {saved.episode.name}
                      </span>
                      
                    </h5>
                  </div>
                </div>
                <div
                  class="modal fade"
                  id="staticBackdrop"
                  data-bs-backdrop="static"
                  data-bs-keyboard="false"
                  tabindex="-1"
                  aria-labelledby="staticBackdropLabel"
                  aria-hidden="true"
                >
                  <div
                    class="modal-dialog"
                    style={{ top: "50%", transform: "translateY(-50%)" }}
                  >
                    <div class="modal-content" id="savedEpModal">
                  
                      <div class="modal-body col-sm">
                        <button
                          data-bs-dismiss="modal"
                          onClick={() =>
                            deleteSavedEpisode({
                              id: saved.episode.id,
                              userId: userId,
                            })
                          }
                        >
                          <i
                            className="bi bi-trash3 fa-5x"
                            style={{
                              fontSize: "200px",
                            }}
                          ></i>
                        </button>
                        <button data-bs-dismiss="modal">
                          <Link to={`/episode/${saved.episode.id}`}>
                            {" "}
                            <i
                              className="bi bi-arrow-bar-right fa-5x"
                              style={{ fontSize: "200px" }}
                            ></i>
                          </Link>
                        </button>
                      </div>
                      <div class="modal-footer">
                        <button
                          type="button"
                          class="btn btn-secondary"
                          data-bs-dismiss="modal"
                        >
                          Close
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </>
    );
  }
}

And this is what my UI currently looks like:

Any tips will be greatly appreciated, thanks in advance!!!!