画面幅を縮めると要素が重なってしまう

画面幅を縮めていくとテキストが重なってしまったり画像の下に隠れてしまうのをどうにかしたいです。
２枚目のようなレイアウトを保ちたいです。

HTML
1
2    <section class="Antique-catalog">
3        <div class="content-wrapper antique-box">
4            <div class="antique-item">
5                <figure><img src="images/antique1.jpg"></figure>
6            </div>
7            <div class="antique-item text-item">
8                <h2>Catalog</h2>
9                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
10                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
11                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
12            </div>
13        </div>
14        <div class="content-wrapper antique-box box2">
15            <div class="antique-item text-item">
16                <h2>Antique</h2>
17                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
18                <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
19                <div style="text-align: center;"><a class="btn" href="#">Read More</a></div>
20            </div>
21            <div class="antique-item">
22                <figure><img src="images/antique2.jpg"></figure>
23            </div>
24        </div>
25    </section>

css
1.Antique-catalog{
2    padding: 60px 0px;
3    background-color: #f5f5f5;
4}
5
6.antique-box{
7    display: flex;
8    align-items: center;
9    justify-content: space-between;
10}
11
12.antique-item{
13    width: 48%;
14    text-align: center;
15    height: 465px;
16}
17
18.antique-item img{
19    width: 100%;
20    object-fit: cover;
21    height: 465px;
22}
23
24.antique-item p{
25    margin-bottom: 30px;
26}
27
28.antique-item h2{
29    margin-bottom: 40px;
30}
31
32.text-item{
33    align-self: center;
34}
35
36.box2{
37    margin-top: 120px;
38}
39
40@media(max-width: 896px){
41    .antique-box{
42        display: block;
43    }
44
45    .antique-item,.text-item{
46        margin-bottom: 60px;
47        width: 100%;
48    }
49
50    .box2{
51        margin: 0px;
52    }
53}