【javascript】slickを格納したモーダルがうまく表示されない。

前提

画面幅に合わせて縮小するモーダルを実装しようとしています。
「モーダルのサムネイルをクリックすると、中のslickが表示される」ところまではうまく動作しましたが、いくつか問題点が出てきてしまいました。

実現したいこと

①レスポンシブ対応できるよう、modaal内のslickをウィンドウのサイズに合わせて縮小するようにしたい。
②モーダルが表示されているときはスクロールバーを非表示にしたい。
③スマホで表示したとき、モーダルを中央に表示したい。

発生している問題・エラーメッセージ

①モーダル、slickが縮小せず、横スクロールが発生してしまう。
②jsでスクロールバーを表示しないよう指示しているが、反映されない。
③スマホ画面で表示したときに、モーダルを中央に表示したいが上に固定されてしまう。

該当のソースコード

HTML

<ul class="gallery"> <span class="fade-top"><li><a href="#gallery-1" class="gallery-list"><img src="images/〇〇.png" alt=""></a></li></span> <section id="gallery-1" class="hide-area"> <ul class="slider"> <li><img src="images/flyer1.png" alt=""></li> <li><img src="images/flyer2.png" alt=""></li> </ul> </section> 　　・ 　　・ 　　・ 　</ul>

CSS

.hide-area{ display: none;} .modaal-fullscreen .modaal-content-container{ background: #fff; color: #fff; text-align: center;} .modaal-fullscreen .modaal-close{ background:none; top:20px; d }/*クローズボタンの×の色変更*/.modaal-close:focus:after,.modaal-close:focus:before,.modaal-close:hover:after,.modaal-close:hover:before{ background:#666; z-index:999;} .gallery{ padding: 80px 0; display: grid; grid-template-columns:1fr 1fr 1fr 1fr; place-items: center center; column-gap: 70px;} .gallery li{ width: 100%; margin: 0 auto; list-style:none; box-shadow: 3px 3px 8px #bfbec5;}.gallery .svg { box-shadow: none; filter: drop-shadow(3px 3px 5px #bfbec5);}.gallery li:hover { transform: scale(0.95); transition: 0.3s}.gallery li a:hover { opacity: 0.6; transition: 0.2s;}/*↓modaalウィンドウが上に固定されてしまうため、中央にしようとしましたが駄目でした*/.flyer-gallery-1 .slider, .flyer-gallery-2 .slider, .flyer-gallery-3 .slider, .flyer-gallery-4 .slider, .card-gallery-1 .slider, .card-gallery-2 .slider { align-items: center;}@media (max-width: 768px) { .gallery{ max-width: 500px; margin: 0 auto; padding: 40px 0; grid-template-columns:1fr 1fr; place-items: center center; column-gap: 10px; row-gap: 40px; } .gallery li { width: 80%; }

JS

$(".gallery-list").modaal({ fullscreen: false, overlay_close: true, background: '#fff', overlay_opacity:0.8, before_open:function(){ $('html').css('overflow-y','hidden'); }, after_close:function(){ $('html').css('overflow-y','scroll'); } });

試したこと

①widthを%表記に変えたりしてみましたが、うまくいきませんでした。
②いろいろと調べましたが、何が原因か分かりませんでした。
③align-itemsで横中央揃えにしようとしましたが、反映されませんでした。

補足

上記の各コードにつきましては、以下のサイトを参考にしています。
https://coco-factory.jp/ugokuweb/move01/9-6-1/

数日試行錯誤しましたが、行き詰ってしまったため、ご教示いただけませんでしょうか。
何卒よろしくお願いいたいます。