Как я могу получить абсолютно позиционированный div, который выходит за пределы родительского позиционера?

Question

есть 2 раздела, и в каждом разделе есть 1 ряд карточек. Карта увеличивается при наведении на карточку. Так выглядит https://codesandbox.io/s/affectionate-dijkstra-ng3r1. Когда я парю над картой первого ряда, ее расширенная часть прячется за нижнюю часть. На картах при наведении css добавлено с позицией, z-index.

<section>
<div className="cxe-card-medium game-card-medium_opened ">
        <div className="cxe-game-card-medium-wrapper ">
          <div style={{ position: "relative" }}>
            <img
              className="cxe-game-image"
              src="/static/images/game-cover-image.png"
            ></img>
            <div className="cxe-wishlist-button">          
                <img
                  src="/static/images/hyperboost/wishlist.svg"                  
                ></img>
            </div>
            <div className="cxe-title-rating-panel">
              <h3>Assassins Creed Origins</h3>
              <div>
                <img src="/static/images/hyperboost/ratings.svg" />
                <span className="cxe-rating">5.3</span>
                <span className="cxe-review">(543 reviews)</span>
              </div>
            </div>
          </div>
          <div></div>
          <Button className="cxe-buy-game-btn">
            <img src="/static/images/anchor.svg" />
          </Button>
        </div>
      </div>
</section>
<section>
<div className="cxe-card-medium game-card-medium_opened ">
        <div className="cxe-game-card-medium-wrapper ">
          <div style={{ position: "relative" }}>
            <img
              className="cxe-game-image"
              src="/static/images/game-cover-image.png"
            ></img>
            <div className="cxe-wishlist-button">          
                <img
                  src="/static/images/hyperboost/wishlist.svg"                  
                ></img>
            </div>
            <div className="cxe-title-rating-panel">
              <h3>Assassins Creed Origins</h3>
              <div>
                <img src="/static/images/hyperboost/ratings.svg" />
                <span className="cxe-rating">5.3</span>
                <span className="cxe-review">(543 reviews)</span>
              </div>
            </div>
          </div>
          <div></div>
          <Button className="cxe-buy-game-btn">
            <img src="/static/images/anchor.svg" />
          </Button>
        </div>
      </div>
</section>

css

.cxe-game-card-medium-wrapper {
    border-radius: 12px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.07);
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), #000000);
    overflow: hidden;
    position: relative;
    max-height: 394px;
}
.game-card-medium_opened {
  transform: scale(1);
  transition: all 0.3s;
  z-index: 6;
}
.cxe-card-medium:hover {
  position: relative;
  height: 396px;
}
.cxe-game-card-medium-wrapper:hover {
  max-height: 560px;
  transform: scale(1);
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  border: solid 1px #04d358;
  box-shadow: 0 0 8px #464545;
}

Получено изображение развернутой карты, скрытой за нижней частью