scalable inline-svg inside grid-item does not scale well

Question

I made an inline svg with 3d.js and I want to use it in a grid layout. Its using minmax(0,xfr) to make sure nothing gets bigger then the grid-item itself. That works resonable but not with inline svg. It seems to ignore the size at first, so I had to set the width and height. But even that is ignored, when the screen becomes wide enough :(

Also it is not positioned in the middle but at the top so also the justify-self: center; align-self: center; options of the grid-item is totaly ignored.

I am trying for hours now with all kind of settings (like preserve aspect ratio etc) but they all seems to not work. Also transform does not seem to work in all screen resolutions. It seems I do something completely wrong, the size is determent by the svg element while the grid should set the size and the svg should adapt.

How can I make this svg behave like a normal scalable picture/div ? You can see the code in codepen :

<div class="container">
  <div class="Picture"></div>
  <div class="Time">
    <div class="StopWatch">
        
    </div>
    <div class="MinutesText"></div>
  </div>
  <div class="Level">
    <div class="LevelPicture" style=" width:100%; height:100%">
    
         <svg  viewBox="0 0 100 100" id="circleLevel">
       
   
   </svg>
    </div>
    <div class="LevelText"></div>
  </div>
  <div class="Arrow">
     
  </div>
</div>



.container {  display: grid;
  grid-template-columns: minmax(0, 0.2fr) minmax(0, 1.5fr) minmax(0, 2.6fr) minmax(0, 0.6fr) minmax(0, 0.1fr);
  grid-template-rows: minmax(0, 0.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.2fr);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". . . . ."
    ". Picture Time . ."
    ". Picture Level Arrow ."
    ". . . . .";
}

.Picture {
  justify-self: center;
  align-self: center;
  grid-area: Picture;
}

.Time {  display: grid;
  grid-template-columns: minmax(0,0.4fr) minmax(0,1.6fr);
  grid-template-rows: minmax(0,1fr);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "StopWatch MinutesText";
  grid-area: Time;
}

.StopWatch {
  justify-self: center;
  align-self: center;
  grid-area: StopWatch;
}

.MinutesText {
  justify-self: start;
  align-self: center;
  grid-area: MinutesText;
}

.Level {  display: grid;
  grid-template-columns: minmax(0,0.4fr) minmax(0,1.6fr);
  grid-template-rows: minmax(0,1fr);
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "LevelPicture LevelText";
  grid-area: Level;
}

.LevelPicture {
  justify-self: center;
  align-self: center;
  grid-area: LevelPicture;
}

.LevelText {
  justify-self: start;
  align-self: center;
  grid-area: LevelText;
}

.Arrow {
  justify-self: center;
  align-self: center;
  grid-area: Arrow;
}


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

https://codepen.io/mistert007/pen/mdjRwqr?editors=1111