横幅を変化させると文字が画像の下に入ってしまう

横幅を変化させると、画像の変化に合わせて、文字も画像に合わせて動いてほしいが、画像の下に入ってしまいます。

文字にoverflow:visible;をつけても変わらない。
当たり前だけど、画像の親要素につけると、画像の変化に対応しない。
absoluteでrelativeからはみ出せないし。

何かいい考えがありましたら、教えていただければ幸いです。

この画像の幅を変化させたときに、画像に対して文字の位置はこのままでいてほしいです

イメージ説明

画像の幅を変化させるとの下に文字が入ってしまいます。
イメージ説明

html
1<div class="co">
2        <div class="cal">
3            <div class="cal-item">
4                <picture>
5                    <source media="(max-width: 767px)" srcset="../final-exam/images/final-exam-assets/cover/cover_sp_2.jpg">
6                    <source media="(min-width: 768px)" srcset="../final-exam/images/final-exam-assets/cover/cover_pc_2.jpg">
7                    <img src="images/final-exam-assets/cover/cover_pc_2.jpg" alt="2">
8                </picture>
9                <div class="cal-t3">
10                    <p class="cal-te4">3日で</p><p class="cal-te42">完結！</p>
11                </div>
12                <div class="cal-t4">
13                    <p class="cal-te5">英検集中</p><p class="cal-te52">プログラム</p> 
14                </div>
15            </div>
16         </div>
17</div>

css
1.cal-item{
2    padding-left: 1.45%!important;
3}
4
5.cal-item picture {
6    position: relative;
7    display:  block;
8    margin-bottom: 6px!important;
9    border-radius: 0 0 0 100px!important;
10    overflow: hidden;
11    object-fit: cover;
12}
13
14.cal-t1{
15    position: absolute;
16    top: 326px;
17    left:28px;
18    padding: 10px;
19    width: 208px;
20    height: 54px;
21    border-radius: 0 8px 8px 0;
22    background-color: rgba(255,255,255,0.8);
23}
24
25.cal-te1,.cal-te12{
26    display: inline-block;
27    line-height: 1;
28    font-size: 25px;
29    font-weight: bold;
30    color: #f2a118;
31}
32
33.cal-te1{
34    padding-left: 5px;
35    padding-top: 2px;
36}
37
38.cal-te12{
39    font-size: 20px;
40}
41
42.cal-te2,.cal-te22{
43    display: inline-block;
44    line-height: 1;
45    font-size: 25px;
46    font-weight: bold;
47    color: #46c017;
48}
49
50.cal-te2{
51    margin-left: -1px;
52}
53
54.cal-te22{
55    font-size: 20px;
56}
57
58.cal-t2{
59    position: absolute;
60    top: 388px;
61    left:28px;
62    padding: 14px 16px 15px 16px;
63    width: 210px;
64    height: 54px;
65    border-radius: 0 8px 8px 0;
66    background-color: rgba(255,255,255,0.8);
67}