Customizing a Modal to be 95% of the screen on mobile

Question

I've been racking my brain trying to figure this out because I am rusty when it comes to coding and I try to make it so this immotile goes almost full screen and wide enough to cover a bubble screens device while still having a view of the background and being able to click out of it. It looks great on a desktop but on smaller iPhones and other devices it cuts off. I cant seem to find the setting to make it wider so it all fits horizontally and vertically without breaking the modal and Iframe.

The ideal functionality is the modal will be wide enough for everything to fit on mobile and desktop (desktop looks fine now), and not need to scroll to fit the other parts (I.e. when hitting contact). Behavior can be seen on https://gbchandler.com

<style>
    
     .close {
        position: absolute;
        right: 1px;
        top: 1px;
        padding: 5px;
        cursor: pointer;
        background-color: #747474;
        border: none;
      }
      .modal {
        left: 0vw;
        top: calc(2.5vw + 120px);
        width: 90vw;
        height: calc(85vh - 190px);
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: all .4s;
        background-color: rgba(248,251,255,0.93);
        border-radius: 4px;
        z-index:999999;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      }      
      .modal.visible {
        opacity: 1;
        pointer-events: all;
      }
      #gbbookatrial {
          height: 100%;
      }
    </style>
   <button id="free-trial-button">CLICK HERE TO SIGN UP FOR A FREE TRIAL CLASS TODAY!</button>
    <div class="modal">
      <button class="X"></button>
      <iframe id="gbbookatrial" 
              src="https://services.gbmembers.net/gbcalendar-1.0/calendar.htm?space=chandler" 
              scrolling="auto" 
              position=center
              style="border:4px;width: 100%;" 
              frameborder="0" 
              allowfullscreen="">
      </iframe>
    </div>
       <script>
      const button = document.querySelector('#free-trial-button');
      const modal = document.querySelector('.modal');
      button.addEventListener('click', function() {
        modal.classList.add('visible');
        const close = modal.querySelector('.close');
        function closeHandler() {
          modal.classList.remove('visible');
          close.removeEventListener('click', closeHandler);
      }
        close.addEventListener('click', closeHandler);
      });
    </script>

Screenshot of behavior:

Tried adjusting vw and converting to Px as well but this breaks the iframe and the entire contents disappear