elements doesnt stick to the grid, css

Question

help me to achieve the expected result.

i have a grid: the red part.

a nested grid: the blue part.

but im not having lucky implementing this on css. the grid is pretty simple, the roulettes with 50% of the screen, a place to put the numbers with 30% of the screen and a "bank" to store numbers with 20% of the screen.

the problem here is the nested grid. in each side of the nested grid should be a roullete, wheel and spin. they should mantain the 1:1 square aspect ratio and scale with the window. but they arent even sticking to the grid.

here is an image of the expected result:

and here is what i get so far:

const sectors = [{
    color: "#f82",
    label: "Stack"
  },
  {
    color: "#0bf",
    label: "10"
  },
  {
    color: "#fb0",
    label: "200"
  },
  {
    color: "#0fb",
    label: "50"
  },
  {
    color: "#b0f",
    label: "100"
  },
  {
    color: "#f0b",
    label: "5"
  },
  {
    color: "#bf0",
    label: "500"
  },
];

const rand = (m, M) => Math.random() * (M - m) + m;
const tot = sectors.length;
const EL_spin = document.querySelector("#spin");
const ctx = document.querySelector("#wheel").getContext('2d');
const dia = ctx.canvas.width;
const rad = dia / 2;
const PI = Math.PI;
const TAU = 2 * PI;
const arc = TAU / sectors.length;

const friction = 0.991; // 0.995=soft, 0.99=mid, 0.98=hard
let angVel = 0; // Angular velocity
let ang = 0; // Angle in radians

const getIndex = () => Math.floor(tot - ang / TAU * tot) % tot;

function drawSector(sector, i) {
  const ang = arc * i;
  ctx.save();
  // COLOR
  ctx.beginPath();
  ctx.fillStyle = sector.color;
  ctx.moveTo(rad, rad);
  ctx.arc(rad, rad, rad, ang, ang + arc);
  ctx.lineTo(rad, rad);
  ctx.fill();
  // TEXT
  ctx.translate(rad, rad);
  ctx.rotate(ang + arc / 2);
  ctx.textAlign = "right";
  ctx.fillStyle = "#fff";
  ctx.font = "bold 30px sans-serif";
  ctx.fillText(sector.label, rad - 10, 10);
  //
  ctx.restore();
};

function rotate() {
  const sector = sectors[getIndex()];
  ctx.canvas.style.transform = `rotate(${ang - PI / 2}rad)`;
  EL_spin.textContent = !angVel ? "SPIN" : sector.label;
  EL_spin.style.background = sector.color;
}

function frame() {
  if (!angVel) return;
  angVel *= friction; // Decrement velocity by friction
  if (angVel < 0.002) angVel = 0; // Bring to stop
  ang += angVel; // Update angle
  ang %= TAU; // Normalize angle
  rotate();
}

function engine() {
  frame();
  requestAnimationFrame(engine)
}

// INIT
sectors.forEach(drawSector);
rotate(); // Initial rotation
engine(); // Start engine
EL_spin.addEventListener("click", () => {
  if (!angVel) angVel = rand(0.25, 0.35);
});

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.grid {
  display: grid;
  grid-template-rows: 50vh 30vh 20vh;
}

.roulettes {
  display: grid;
  grid-template-columns: 50fr 50fr;
}

#roulette {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

#wheel {
  display: block;
}

#spin {
  font: 1.5em/0 sans-serif;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  margin: -15%;
  background: #fff;
  color: #fff;
  box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: 0.8s;
}

#spin::after {
  content: "";
  position: absolute;
  top: -17px;
  border: 10px solid transparent;
  border-bottom-color: currentColor;
  border-top: none;
}

#op_roulette {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

#op_wheel {
  display: block;
}

#op_spin {
  font: 1.5em/0 sans-serif;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  margin: -15%;
  background: #fff;
  color: #fff;
  box-shadow: 0 0 0 8px currentColor, 0 0px 15px 5px rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  transition: 0.8s;
}

#op_spin::after {
  content: "";
  position: absolute;
  top: -17px;
  border: 10px solid transparent;
  border-bottom-color: currentColor;
  border-top: none;
}

<body>
  <div class="grid" width="100vw" height="100vh">
    <div class="roulettes">
      <div id="roulette">
        <canvas id="wheel" width="300%" height="300%"></canvas>
        <div id="spin">SPIN</div>
      </div>
      <div id="op_roullete">
        <canvas id="op_wheel" width="300%" height="300%"></canvas>
        <div id="op_spin">SPIN</div>
      </div>
    </div>
    <div id="operation">=</div>
    <div id="bank">BANK</div>

  </div>
</body>

PS. (the will is made by https://stackoverflow.com/users/383904/roko-c-buljan) i know that the wheel is draw by js, and it only draws in the wheel element. once i get the grid right i will change the code to draw a wheel on the op_wheel element too, so this is not a problem.