【GSAP】横スクロールするsectionについて

実現したいこと

sectionの一部が横スクロールするサイトを作成しています。

発生している問題・分からないこと

codepenのコードを参考にしています。大きいモニターで見る際は正常ですが、ノートパソコンだとカードが見切れて見づらくなります。
GSAP側が勝手に高さ調整をしているっぽいのですが、ノートパソコンでも見やすくするにはどうすればいいでしょうか。
(画像はノートパソコンのもの)

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1">
6	<title></title>
7	<link rel="stylesheet" href="css/destyle.css"> 
8	<link rel="stylesheet" type="text/css" href="css/style.css">
9	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
10</head>
11<body>
12	<h1 class="title">GSAP Pinning Side Scroll</h1>
13<section class="normal section">
14  <div class="container">
15    <h2 class="normal-heading heading">普通のセクション</h2>
16    <p class="normal-text">
17      テキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよ
18    </p>
19  </div>
20</section>
21
22<section class="side-scroll section">
23  <div class="side-scroll-container container">
24    <h2 class="side-scroll-heading heading">
25      横にスクロールするセクション
26    </h2>
27    <div class="side-scroll-list-wrapper">
28      <ul class="side-scroll-list">
29        <li class="side-scroll-item">Card</li>
30        <li class="side-scroll-item">Card</li>
31        <li class="side-scroll-item">Card</li>
32        <li class="side-scroll-item">Card</li>
33        <li class="side-scroll-item">Card</li>
34        <li class="side-scroll-item">Card</li>
35      </ul>
36    </div>
37  </div>
38</section>
39
40<section class="normal section">
41  <div class="container">
42    <h2 class="normal-heading heading">普通のセクション</h2>
43    <p class="normal-text">
44      テキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよテキストが入りますよ
45    </p>
46  </div>
47</section>
48
49<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
50<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
51<script type="text/javascript" src="js/javascript.js"></script>
52</body>
53</html>

css
1@charset "utf-8";
2
3body {
4  background-color: #eeebdd;
5  color: #1b1717;
6  font-family: Avenir, 'Helvetica neue', Helvetica, sans-serif;
7}
8
9/* 共通 */
10.section {
11  width: 100%;
12  padding: 100px 0;
13}
14.container {
15  width: 80%;
16  max-width: 900px;
17  margin: 0 auto;
18}
19
20.heading {
21  font-size: 40px;
22  font-weight: 700;
23  letter-spacing: 0.05em;
24}
25
26/* タイトル */
27.title {
28  padding: 200px 0 20px;
29  font-size: 52px;
30  text-align: center;
31}
32
33/* 普通のセクション */
34.normal-text {
35  font-size: 20px;
36  letter-spacing: 0.08em;
37  margin-top: 60px;
38}
39
40/* 横スクロールセクション */
41.side-scroll {
42  background-color: #1b1717;
43  display: flex;
44  justify-content: center;
45  align-items: center;
46}
47
48.side-scroll-heading {
49  color: #eeebdd;
50}
51
52.side-scroll-list-wrapper {
53  position: relative;
54  width: 100%;
55  height: 700px;
56}
57
58.side-scroll-list {
59  position: absolute;
60  top: 60px;
61  left: 0;
62  display: flex;
63  gap: 0 60px;
64}
65
66.side-scroll-item {
67  display: flex;
68  align-items: center;
69  justify-content: center;
70  width: 300px;
71  height: 420px;
72  background-color: #eeebdd;
73  color: #1b1717;
74  font-size: 32px;
75  font-weight: 700;
76}
77
78.side-scroll-item + .side-scroll-item {
79  margin-left: 60px;
80}

JavaScript
1const listWrapperEl = document.querySelector('.side-scroll-list-wrapper');
2const listEl = document.querySelector('.side-scroll-list');
3
4gsap.to(listEl, {
5  x: () => -(listEl.clientWidth - listWrapperEl.clientWidth),
6  ease: 'none',
7  scrollTrigger: {
8    trigger: '.side-scroll',
9    start: 'top top', // 要素の上端（top）が、ビューポートの上端（top）にきた時
10    end: () => `+=${listEl.clientWidth - listWrapperEl.clientWidth}`,
11    scrub: true,
12    pin: true,
13    anticipatePin: 1,
14    invalidateOnRefresh: true,
15  },
16});