ピンク領域は、max-width: 800px; の親要素
水色領域は、親要素に対して横幅30%の正方形（aspect-ratio: 1 / 1; を使用）
水色領域内の中央に文字を配置（フィレックスレイアウトを使用）
サンプル1
サンプル2