slickスライダー内の文字の行数が更新ボタンを押した時だけ制御できなくなる

やりたいこと

slick.jsで添付画像のようなカード型のカルーセルスライダーを作りたいです。
その際、タイトルとその下の文章に、それぞれ行数を指定して
PC表示ではタイトル・内容文ともに3行ずつ
スマホ表示ではタイトル・内容文ともに2行ずつにしたいと考えています。

今回は、-webkit-line-clampを使用しましたが、方法にはこだわっておりません。

PCの表示

スマホの表示

困っていること

スマートフォンの実機で表示した際、最初の１回目に開いたときには問題ないのですが
ブラウザの更新ボタンを押すと、タイトルも内容文も行数の制御ができず、
全ての文章が出てしまいカードが伸びてしまいます。

PCのエミュレーターではそのような表示にならず、実機だけこのようになります。（iPhoneのsafari、Chrome）

ボタンクリックで別のページへ遷移して、ブラウザ機能で戻ると、タイトル・内容文が2行ずつの状態に戻ります。

スマホで更新ボタンを押した時の表示
![

試したこと

①タイトルと内容文にそれぞれmin-heightの指定
⇒更新ボタンを押した際に文字が溢れてしまいました。

②padding、marginの削除
⇒タイトルと内容文に指定されたpadding、marginを削除しましたが
その場合でも、文字が全部表示されてしまいました。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta name="viewport" content="width=device-width,initial-scale=1">
5    <meta charset="UTF-8">
6    <title>TEST</title>
7    <link href="js/slick.css" rel="stylesheet" type="text/css">
8    <link href="js/slick-theme.css" rel="stylesheet" type="text/css">
9    <link href="css/reset.css" rel="stylesheet" type="text/css">
10    <link href="css/style.css" rel="stylesheet" type="text/css">
11  </head>
12  <body>
13
14    <article style="margin: 50px auto 0;max-width: 1200px;">
15      <section class="c-Wrap">
16        <div class="c-Wrap-inner">
17          <div class="slider">
18            <div class="c-Area">
19              <div class="c-Area__image">
20                <img src="images/image01.png" alt="">
21              </div>
22              <div class="c-Area__content">
23                <div class="c-Area__contentBox">
24                  <h3 class="c-Area__title">商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル商品タイトル</h3>
25                </div>
26                <p class="c-Area__text">商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。</p>
27              </div>
28              <a href="" class="c-Area__link"></a>
29            </div>
30            <div class="c-Area">
31              <div class="c-Area__image">
32                <img src="images/image02.png" alt="">
33              </div>
34              <div class="c-Area__content">
35                <div class="c-Area__contentBox">
36                  <h3 class="c-Area__title">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
37                </div>
38                <p class="c-Area__text">商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。</p>
39              </div>
40              <a href="" class="c-Area__link"></a>
41            </div>
42            <div class="c-Area">
43              <div class="c-Area__image">
44                <img src="images/image03.png" alt="">
45              </div>
46              <div class="c-Area__content">
47                <div class="c-Area__contentBox">
48                  <h3 class="c-Area__title">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
49                </div>
50                <p class="c-Area__text">商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。</p>
51              </div>
52              <a href="" class="c-Area__link"></a>
53            </div>
54            <div class="c-Area">
55              <div class="c-Area__image">
56                <img src="images/image03.png" alt="">
57              </div>
58              <div class="c-Area__content">
59                <div class="c-Area__contentBox">
60                  <h3 class="c-Area__title">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</h3>
61                </div>
62                <p class="c-Area__text">商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。商品内容がここに入ります。</p>
63              </div>
64              <a href="" class="c-Area__link"></a>
65            </div>
66          </div>
67        </div>
68      </section>
69    </article>
70
71    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
72    <script type="text/javascript" src="js/slick.min.js"></script>
73    <script type="text/javascript">
74      $(function() {
75        $('.sliderEvent').slick({
76            infinite: true,
77            dots: false,
78            arrows: true,
79            slidesToShow: 3,
80            slidesToScroll: 1,
81            responsive: [{
82              breakpoint: 769,
83              settings: {
84                arrows: false,
85                dots: true,
86                slidesToShow: 1,
87                slidesToScroll: 1,
88                centerMode: true,
89                centerPadding: '5%'
90              }
91            }]
92         });
93      });
94    </script>
95
96  </body>
97</html>

css
1.c-Wrap {
2  display: flex;
3  flex-flow: row wrap;
4  justify-content: space-between;
5}
6.c-Area {
7  display: flex;
8  background: #fff;
9  border-radius: 10px;
10  box-shadow: 0 0 9px rgba(81,81,81,0.20);
11  position: relative;
12}
13.c-Area__link {
14  width: 100%;
15  height: 100%;
16  position: absolute;
17  top:0;
18  left: 0;
19}
20.c-Area__content {
21  display: flex;
22  flex-direction: column;
23  flex-grow: 1;
24  border-radius: 0 0 10px 10px;
25  background: #fff;
26}
27.c-Area__contentBox {
28  flex-grow: 1;
29}
30.c-Area__image {
31  background: #fff;
32  border-radius: 10px 10px 0 0;
33  overflow: hidden;
34}
35.c-Area__image img {
36  display: block;
37  max-width: 100%;
38  width: 100%;
39  border-radius: 10px 10px 0 0;
40  object-fit: cover;
41  object-position: center top;
42}
43.c-Area__title {
44  line-height: 1.5;
45  font-weight: bold;
46  color: #3c3c3c;
47}
48.c-Area__text {
49  border-top: 1px solid #ccc;
50  color: #333;
51  line-height: 1.8;
52}
53
54@media screen and (max-width: 768px) {
55  .c-Wrap {
56    margin-bottom: -20px;
57  }
58  .c-Area {
59    flex-direction: column;
60    margin-bottom: 20px;
61  }
62  .c-Area__image img {
63    height: 50vw;
64  }
65  .c-Area__content {
66    padding: 16px 18px 20px;
67  }
68  .c-Area__title {
69    margin-bottom: 18px;
70    white-space: pre-line;
71    -webkit-box-orient: vertical;
72    display: -webkit-box;
73    overflow: hidden;
74    -webkit-line-clamp: 2;
75    font-size: 16px;
76  }
77  .c-Area__text {
78    padding-top: 16px;
79    margin-bottom: 24px;
80    font-size: 14px;
81    overflow: hidden;
82    white-space: pre-line;
83    display: -webkit-box;
84    -webkit-box-orient: vertical;
85    -webkit-line-clamp: 2;
86  }
87}
88@media screen and (min-width:769px) {
89    .c-Wrap {
90      margin-bottom: -32px;
91    }
92    .c-Area {
93      display: flex;
94      flex-direction: column;
95      margin-bottom: 32px;
96      width: 352px;
97      border-radius: 10px;
98    }
99    .c-Area__image img {
100      height: 214px;
101      transition: all .5s ease;
102    }
103    .c-Area:hover .c-Area__image img {
104      transform: scale(1.2);
105      transition: all .5s ease;
106    }
107    .c-Area__content {
108      padding: 16px 24px 24px;
109    }
110    .c-Area__contentBox {
111      max-height: 126px
112    }
113    .c-Area__title {
114      margin-bottom: 16px;
115      overflow: hidden;
116      white-space: pre-line;
117      display: -webkit-box;
118      -webkit-box-orient: vertical;
119      -webkit-line-clamp: 3;
120      font-size: 18px;
121      transition: all .5s ease;
122    }
123    .c-Area:hover .c-Area__title {
124      opacity: 0.6;
125    }
126    .c-Area__text {
127      margin-bottom: 24px;
128      padding-top: 16px;
129      font-size: 14px;
130      overflow: hidden;
131      white-space: pre-line;
132      display: -webkit-box;
133      -webkit-box-orient: vertical;
134      -webkit-line-clamp: 3;
135      transition: all .5s ease;
136    }
137    .c-Area:hover .c-Area__text {
138      opacity: 0.6;
139    }
140 }
141
142/*****************************************
143slick
144*****************************************/
145
146.slider.slick-slider .slick-list,
147.slider.slick-slider .slick-track {
148  display: flex;
149}
150.slider.slick-slider .c-Area.slick-slide {
151  display: flex;
152}
153.slider.slick-slider .slick-list,
154.slider.slick-slider .slick-track {
155  padding-bottom: 5px;
156}
157.slider.slick-slider .slick-slide a {
158  pointer-events: auto;
159}
160
161@media screen and (max-width: 768px) {
162  .slider.slick-slider {
163    width: 100vw!important;
164  }
165  .slider.slick-dotted.slick-slider {
166    margin-bottom: 5vw;
167  }
168  .slider.slick-slider .slick-slide {
169    margin: 0 7px;
170  }
171  .slider.slick-slider.slick-dotted {
172    padding-bottom: 10vw;
173  }
174  .slider.slick-slider .slick-dots {
175    right: auto;
176    left: 0;
177    bottom: 0;
178    padding-right: 0;
179    text-align: center;
180  }
181}
182
183@media screen and (min-width:769px) {
184  .slider.slick-slider {
185    width: 1120px;
186  }
187  .slider.slick-slider .slick-slide {
188    margin: 0 16px;
189  }
190  .slider.slick-slider .slick-list {
191    margin: 0 -16px 30px;
192  }
193  .slider.slick-slider .c-Area {
194    width: 352px!important;
195  }
196}
197