slick.jsの中央スライド幅を、Bootstrap4の<div class="row">の幅に合わせたレスポンシブ表示にしたい

Question

画像3枚をスライドさせ、中央の画像をBS4のrow幅に合わせて100％表示したいです。
更にBS4のブレイクポイントに合わせてスライドもレスポンシブ対応にしたいです。

SlickにvariableWidth: true,を指定すると
幅は固定するのですが、レスポンシブ対応されないので悩んでいます。

■index.html

・・・略・・・
    <div class="mainvisual-slide-box sticky-pos">
        <div class="slide-item"><img src="img/old-3480569_1280.jpg" alt=""></div>
        <div class="slide-item"><img src="img/chicago-1775878_1280.jpg" alt=""></div>
        <div class="slide-item"><img src="img/concert-1149979_1280.jpg" alt=""></div>
    </div>
    <div class="thumbnail-thumb">
        <div><img src="img/old-3480569_1280.jpg" alt=""></div>
        <div><img src="img/chicago-1775878_1280.jpg" alt=""></div>
        <div><img src="img/concert-1149979_1280.jpg" alt=""></div>
    </div>
    <main class="container" id="main-page">
    	<div class="row">

・・・略・・・

slickの記述
■script.js

$('.mainvisual-slide-box').slick({
    infinite: true, //スライドのループ有効化
    dots:false, //ドットのナビゲーションを表示
    arrows: false, //矢印非表示
    centerMode: true, //要素を中央寄せ
    // centerPadding:'18%', //両サイドの見えている部分のサイズ
    autoplay:true, //自動再生
    variableWidth: true,
    });
    $('.thumbnail-thumb').slick({
      infinite: true, //スライドのループ有効化
      slidesToShow: 8, //表示するスライドの数
      focusOnSelect: true, //フォーカスの有効化
      asNavFor: '.mainvisual-slide-box', //mainvisual-slide-boxクラスのナビゲーション
    });
 

■style.css

.mainvisual-slide-box { margin: 0 0 15px;}
	.mainvisual-slide-box .slick-next { right: 20px; z-index: 99;}
	.mainvisual-slide-box .slick-prev { left: 15px; z-index: 100;}
	.thumbnail { max-width: 700px; margin: 0 auto 5px; padding: 0;}
	.thumbnail img, .thumbnail-thumb img{ width: 100%;}
	.thumbnail-thumb { max-width: 700px; margin: 0 auto;}
	.thumbnail-thumb li { margin: 5px;}
	.thumbnial-thumb .slick-next { right: 20px; z-index: 100;}
	.thumbnail-thumb .slick-prev { left: 15px; z-index: 100;}
	.thumbnail-thumb .slick-current { opacity: 0.5;}
	.thumbnail-thumb div div div { cursor: pointer;}
	
	.slide-item{
	  width:100%;
	  max-width:1110px;
	  height: auto;
	}
	 .slide-item img{
	    width: 100%;
	  }

以下は他の質問でも使用しているデモサイトのURLです。
実際の動きはこちらでご確認いただけます。
http://kapimatsuowl.starfree.jp/qa1/