slick.jsの幅とサイズを調整したい

いろいろ参考にしながら、頑張ったのですが、どうしてもできずに困っています。
どうかお知恵をおかしください！

やりたいこと

https://www.doscorp.co.jp/
▲こちらのサイトのようなイメージ（PROJECT）で、
スライダーを一つ大きくしそれをコンテンツ幅の右に合わせたうえで、それぞれの画像の間を均一にしたいです。
スライダーはブラウザ幅いっぱい、自動再生、ループもしたいです。

▼こうしたい

slick.jsを利用

▼下記を参考に、slick.jsを使ってみました。
https://coco-factory.jp/ugokuweb/move01/6-1-7/

slick.jsでセンターモードにし、transformで左に動かすことで実現できないかと思い
やってみましたが、惜しいところまでしかいけませんでした・・・。

html
1<head>
2<link rel="stylesheet" href="slick.css">
3<link rel="stylesheet" href="slick-theme.css">
4</head>
5～中略～
6<div class="slider">
7 <div><img src="img_01.jpg" alt=""></div>
8 <div><img src="img_02.jpg" alt=""></div>
9 <div><img src="img_03.jpg" alt=""></div>
10 <div><img src="img_04.jpg" alt=""></div>
11 <div><img src="img_05.jpg" alt=""></div>
12 <div><img src="img_06.jpg" alt=""></div>
13</div>
14～中略～
15<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> 
16<script src="slick.js"></script>

javaScript
1	$('.slider').slick({
2	autoplay: true,
3	infinite: true,
4	speed: 1000,
5	slidesToScroll: 1,
6	arrows: false,
7	centerMode: true,
8	variableWidth:true,
9	dots:true,
10	focusOnSelect:true,
11	responsive: [{
12		breakpoint: 1200,
13		settings: {
14			}
15		}, {
16			breakpoint: 767,
17			settings: {
18			centerMode: false		
19			}
20		}]		
21	});
22

【やってみたこと1】CSSでscaleを調整してみたが・・・

scaleでサイズを調整してみましたが、間が均一になりません。

css
1/* コンテンツ幅は1200px;　*/
2.slider {overflow: visible; }
3.slick-slide img {
4	width: 480px;
5	height:auto;
6}
7.slider .slick-slide {
8	transform: scale(0.6) translate(-504px , 0);
9}
10.slick-slide.slick-center {
11	transform: scale(1) translate(-360px , 0);
12}
13

▼こうなってしまう

【やってみたこと2】CSSでmarginとwidthで調整してみたが・・・

scaleでは難しいようなので、widthとmarginで調整してみたのですが、
一度コンテンツ幅をオーバーしてから正しい位置に戻ります。

css
1/* コンテンツ幅は1200px;　*/
2.slick-slide img {width: 100%;}
3.slider .slick-slide {
4	transform: translate(-360px , 0);
5	width: 288px;
6	margin:  0 30px;
7	}
8.slick-slide.slick-center {
9	transform: scale(1) translate(-360px , 0);
10	width: 480px;
11}
12