How Make Embedded Google Calendar Responsible for Mobile

Question

I embedded a Google calendar into my website. It works and looks fine, the issue is that after the display screen width decreases to a certain number the calendar starts to overlap and not become fully visible. Is there a way to possibly scale down the calendar so that this does not happen? I will provide my code along with a screenshot of the calendar getting cut off when it is mobile. The overlapping begins when the screen width is 355px. Any help or suggestions would be awesome!

HTML Code

               <section class="popular section" id="events">
              <h2 class="section__title">
              Upcoming Events In Accord
              </h2>

           
              <!-- iframe wrapped in a div for centering -->
              <div class="iframe-container">
                 <iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=America%2FNew_York&title=Accord%20NY&src=MTYzMGRjNjkwZTk1NGNmYWYyYzU4NzI5Njk0ZmI5MzJkZGY2Zjk0ZTY1Y2M1M2IzYzU0Mzg5ODg1OWUxZmMzZUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=ZW4udXNhI2hvbGlkYXlAZ3JvdXAudi5jYWxlbmRhci5nb29nbGUuY29t&color=%23F09300&color=%230B8043" style="border:solid 1px #777" width="700" height="600" frameborder="0" scrolling="no"></iframe>  
              </div>
           </section>

CSS Code

    .iframe-container {
      display: flex;
      justify-content: center;
      overflow: hidden; 
      padding-bottom: 56.25%; 
      position: relative;
      height: 0; 
      margin-left: 50px;
      margin-right: 50px;
      border-radius: 5px;
      
    }

    .iframe-container iframe {
      border: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }


          @media (max-width: 620px) {
            
            .iframe-container{
              margin-left: 10px;
              margin-right: 10px;
            }


          }



          @media (max-width: 445px) {
        
          .iframe-container {
            padding-top: 75%; /* Adjusts the aspect ratio for a taller view, accommodating for the narrower screen */
          }

          
          }