How do I rescale the content of the div without using transform: scale?

Question

I have a grid with some cards. The card has only an svg on it, until hovered on. When a user hovers over one of the cards, it should grow in size and reveal some of the hidden content.

The issue: When using transform: scale(1.5,2) on the cards, it doesn't scale the content of card; it just looks as if it blew up (CSS transform: scale does not change DOM size?). I want the svg that was on the card before the hover to be positioned differently once the card is hovered over. Specifically, before hover it has:

position: absolute;
inset: 0;
margin: auto auto;

so that it's perfectly centered (only taking up 80% of the container). After the hover, I want to change it's position to:

position absolute;
top: 0;
margin: 0 auto;

so that it's stuck to the top, horizontally centered.

But since the content of the div isn't scaled using transform: scale(1.5,2), the svg stays in the same place, shrinking itself.

The Goal: How can I properly increase the size of the card? I tried using padding, but I ended up guessing numbers. For instance, I tried 3em, which seemingly had no effect. After opening up my dev tools, I noticed that it did have an effect; 3em was just smaller than the original size of the card. Do this require JS? Do I need to have some variable tracking the padding of the card, and then adding to that padding?

Thanks in advance

*,*::before,*::after {
  box-sizing: border-box;
}

html,body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  background: #b9c29e;
  
  display: grid;
}

.base-flexbox-layout {
  display: flex;
}

.base-grid-layout {
  display: grid;
}

.item-grid-container {
    width: 80%;

    flex-direction: column;
    justify-content: center;
}
.item-grid {
    position: relative;
    width: 90%;
    height: 60%;
    margin: 0 auto;

    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
}
.item-grid div {
    position: relative;
    max-width: 100%;
    max-height: 100%;

    background: linear-gradient(to right bottom, #FAFAE0, #FAEDCD);
    box-shadow: 0px 0px 5px 7px #B9C29E;
    border-radius: 10px;

    transition: all 1s ease-in-out;
}
.item-grid div * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    max-width: 100%;
    max-height: 100%;

    /* transition: all 1s ease-in-out; */
}

#top-left {
    transform-origin: top left;
}
#top-middle {
    transform-origin: top;
}
#top-right {
    transform-origin: top right;
}
#middle-left {
    transform-origin: left;
}
#middle-middle {
    transform-origin: center;
}
#middle-right {
    transform-origin: right;
}
#bottom-left {
    transform-origin: bottom left;
}
#bottom-middle {
    transform-origin: bottom;
}
#bottom-right {
    transform-origin: bottom right;
}
.item-grid div[id]:hover {
    transform: scale(1.5,2);
    z-index: 99;
}
/* .item-grid div[id]:hover svg {
    transform: scale(0.5);
    width: 100%;
    top: 0;
    margin: 0 auto;
} */

<section class="panel panel--alt-choices base-flexbox-layout">
  <div class="item-grid-container base-flexbox-layout">
    <div class="base-grid-layout item-grid">
      <div class="list-item thoughtpiece" id="top-left">
      </div>
      <div class="list-item thoughtpiece" id="top-middle">
      </div>
      <div class="list-item thoughtpiece" id="top-right">
      </div>
      <div class="list-item bottle" id="middle-left">
      </div>
      <div class="list-item bottle" id="middle-middle">
      </div>
      <div class="list-item bottle" id="middle-right">
      </div>
      <div class="list-item oil" id="bottom-left">
      </div>
      <div class="list-item oil" id="bottom-middle">
      </div>
      <div class="list-item oil" id="bottom-right">
        <svg width="80%" height="80%" viewBox="0 0 200 200">
          <g strokeWidth="1">
            <circle cx="100" cy="100" r="100" />
            <g stroke="white" fill="white">
              <circle cx="60" cy="70" r="25" />
              <circle cx="140" cy="70" r="25" />
              <path stroke-width="10" fill="none" d="M50,140 q40,40,80,0" />
            </g>
          </g>
        </svg>
      </div>
    </div>
  </div>
</section>