Want the hexagon to move to the right-hand side. without the size being reduced and if the screen size is reduced and It hasn't changed either

Question

// create hexagon 20 column and 15 rows (typescript + reacts)

Only attached to the display that needs to be flexed, cannot be changed to something else. I want it to be the way I designed it. (https://i.stack.imgur.com/rEMqq.png)

import "./App.css";

function App() {
  const column = 15;
  const row = 20;

  const arr: number[] = Array(column).fill(0) || [];
  const arr2: number[][] = Array(row).fill(arr) || [];

  return (
    <div>
      {arr2.map((data, key) => {
        return (
          <div
            style={{
              display: "auto",
              paddingLeft: "500px",
            }}
            key={key}
          >
            {data.map((data2, k) => {
              return (
                <div
                  key={k}
                  style={{
                    transform: `translate(-${(25 * k) / 4}px,${
                      k % 2 === 0 ? "25px" : "0px"
                    }`,
                    marginTop: k % 2 === 0 ? "5px" : "0px",
                  }}
                  className={"hex-grid-content"}
                >
                  <img src={"image"}></img>
                </div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

export default App;

//here is build hexagon

.hex-grid-content {
  position: static;
  height: 50px;
  width: 50px;
  font-size: 20px;
  background-color: #6e60bb;
  color: #ffccaa;
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  align-items: center;
  text-decoration: none;
  text-align: center;
  transition: transform 0.24s ease-out;
  /* margin-bottom: 0px;
  padding-right: 10px; */
}

.hex-grid-content:hover {
  transform: scale(4.1);
}

If you can move it to the desired position. And making it possible to use hover as well would be very grateful.