如何调整卡片转盘的尺寸

Question

我创建了一个卡片旋转木马，它在大屏幕上看起来很完美，但是当我调整浏览器大小时，它会切成两半，请看下面的示例：-

原始尺寸：-

浏览器调整大小：-

这是我的html代码：-

.carousel .carousel-item {
width: 30% !important;

}
.carousel {
max-width: 100%;
height: auto;
width: auto;
}

.card{ 
border-radius: 8px; 
position: relative !important;
right: 40px !important;
width:28vw;

}

<div class="carousel carousel-slider center">
         <div class="carousel-item">
            <div class="card">
              <div class="card-image">
                <img src="https://i.ibb.co/Vp7q9CN/Daca.gif">
              </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">Reveal<i class="material-icons right">more_vert</i></span>
                </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                     <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
         </div>
         <div class="carousel-item">
            <div class="card">
              <div class="card-image">
                <img src="https://i.ibb.co/Vp7q9CN/Daca.gif">
              </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">Reveal<i class="material-icons right">more_vert</i></span>
                </div>
                <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                     <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
         </div>

在调整浏览器窗口的大小时，如何使其具有相同的大小，或者只是使其具有相关的大小，而不会被切掉。

这是全屏显示的新外观。