画像の右側に文章を回り込み

実現したいこと

画像は画像拡大スクリプトのLuminousを適用しています
html、css超初心者なので、ChatGPTで作業しています。
画像の右側に文章を回り込ませ、テキストが画像の縦幅を超えた場合、超えたテキストは画像の下に表示させたいと思います

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

画像の右側に文章を回り込ますことはできるのですが、画像の縦幅を超えたテキストがそのまま右側に表示され、画像の下に表示させることができません

該当のソースコード

html
<!-- 画像とテキストのコンテナ -->
<div class="image-text-container">
    <!-- 画像ブロック -->
    <div class="image-box">
        <a class="luminous" href="画像アドレス">
            <img src="画像アドレス" alt="画像テキスト">
        </a>
        <div class="caption">画像テキスト</div> <!-- 画像の下中央にキャプションを配置 -->
    </div>

    <!-- テキストブロック -->
    <div class="text-box">
        <p>
            テキスト
        </p>
        <p>
            テキスト
        </p>
    </div>
</div>

css
/* 画像とテキストのコンテナ */
.image-text-container {
    display: flex;
    flex-wrap: wrap; /* 必須：画像の高さを超えたテキストを回り込ませる */
    align-items: flex-start;
    gap: 20px;
    max-width: 1000px;
    margin: 20px auto;
}

/* 画像ボックス */
.image-box {
    flex-shrink: 0;
    width: 600px;
    text-align: center;
}

/* 画像のスタイル */
.image-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* キャプション（画像の下中央） */
.caption {
    font-size: 15px;
    text-align: center;
    text-shadow: 3px 10px 5px #ff8c04;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

/* テキストボックス */
.text-box {
    flex: 1;
    min-width: 300px; /* 画像が大きい時に適切な幅を確保 */
}

/* **画像の高さを超えたテキストを画像の下に回り込ませる** */
@media screen and (min-width: 801px) {
    .text-box::after {
        content: "";
        flex-basis: 100%;
        height: 0;
    }
}

/* レスポンシブ対応（800px以下） */
@media screen and (max-width: 800px) {
    .image-text-container {
        flex-direction: column;
        text-align: center;
    }

    .image-box {
        width: 100%;
    }

    .image-box img {
        width: 100%;
        max-width: 600px;
    }

    .text-box {
        width: 100%;
    }
}