画像半分・テキスト半分の2カラムヒーロー。gridの2カラムを、狭い画面ではメディアクエリで縦積みに切り替える定番構成です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
grid-template-columns: 1fr 1fr の2カラムを、メディアクエリで 1fr に切り替えるだけの潔い構成です。テキスト側は place-content: center で「コピーのかたまりごと」中央に置きます（place-itemsだと各要素が個別に中央化されて揃いません）。縦積み時の画像は高さが失われるため、aspect-ratio で確保し直します。HTMLの記述順（画像→テキスト）がモバイルでの表示順になる点も設計時に意識してください。
画像を右に置きたい場合はHTML順を変えず、メディア側にorder: 2を指定すればモバイルの順序を保てます。
画像半分・テキスト半分の左右分割ヒーローセクションを作ってください。gridの2カラムで、テキスト側はplace-content: centerで中央配置、狭い画面ではメディアクエリで縦積みに切り替えてください。