Как сделать модальное окно, которое меняет размер?

Здравствуйте. Имеется модальное окно со встроенным внутри слайдером картинок. На данный момент фиксированный размер окна 620x620, эти размеры необходимы для демонстрации 3 и 4 картинки, но нужно, чтобы 1 и 2 картинки демонстрировались при размере окна в 320х320. То есть надо, чтобы после второй картинки размер модального окна менялся с 320х320 на 620х620. Помогите, пожалуйста, решить эту задачу, если это вообще возможно сделать.

 #wrap9{

        display: none;

        opacity: 0.8;

        position: fixed;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        padding: 16px;

        background-color: rgba(1, 1, 1, 0.725);

        z-index: 100;

        overflow: auto;

    }

    

    #window9{

        width: 620px;

        height: 620px;

        margin: 50px auto;

        display: none;

        background: #fff;

        z-index: 200;

        position: fixed;

        left: 0;

        right: 0;

        top: 0;

        bottom: 0;

        padding: 16px;

    }

    

	

#slider{

    width: 100%;

    height: 80vh;

    margin: 0px auto;

    position: relative;

    overflow: hidden;

	text-align:center;

}

.slide_item{

    width:  100%;

    height: 100%;

    position: absolute;

    left: 0;

    top:0;

    float: left;

    opacity: 0;

    z-index: -10;

    background-size: cover;

}

<button onclick="show('block')">Продолжить</button>

        <div id="wrap9"></div>



                    <!-- Само окно-->

            <div id="window9">

			

 

	      <div id="slider">

		  

<div class="slide_item">

<img src="https://cdn1.flamp.ru/1b0c06e888addc8e158ca552709de5a5_300_300.jpg">

</div>



<div class="slide_item">

<img src="https://cdn1.flamp.ru/4c6ba0df4ec769222aea54ba2159a68c_300_300.jpg">

</div>



<div class="slide_item">

<img src="https://app.clilk.com/db/projpics/5b6479432ab66ea7789f0172.png">

</div>



<div class="slide_item">

<img src="https://i03.fotocdn.net/s117/c9fe0056cfefb3ac/gallery_m/2676059525.jpg">

</div>



</div>

</div>

let timer = null;

let slider = document.querySelector('#slider'),

  slides = slider.querySelectorAll('.slide_item'),

  len = slides.length,

  index = len - 1,

  dir = 1;

 

function move() {

  slides[index].style.opacity = "";

  slides[index].style.Zindex = "";

  index = (index + dir + len) % len;

  slides[index].style.opacity = 1;

  slides[index].style.Zindex = 1;

  index < len - 1 && (timer = window.setTimeout(move, 2000));

}

 

function show(state) {

  if (state === "block") {

    timer = window.setTimeout(move, 0);

  } else {

    clearTimeout(timer);

  }

  document.getElementById('window9').style.display = state;

  document.getElementById('wrap9').style.display = state;

}