mainに一つを作りたい flex横並び（応用）

Question

mainの一つとして画像の様なものを作成したいのですが、つまづいています。
各画像はリンク付きのものであり、尚且つ画像の真ん中には果物名とボタンの様なもの、また、それらには果物の画像が半透明で見えるよう、半透明の背景（画像内の斜線の入った四角形の部分）を設置しております。

縦長い長方形２つ、横長い長方形の２つを画像の様に配置する事が出来ません。
flexを用いて作成しようとしていますが、初心者の限界の様な、どんな要素で何をどの様に使ったら良いのかわからなくなってしまいました。どなたかお助け頂けないでしょうか。

両サイドの点線はcontainerで中央揃えにしております。
縦長方形画像　width 362px height 543px
横長方形画像　width 362px height 256.5px です。

     <section>
       <div class="section-wrapper product">
         <div class="section-title"><h2>フルーツ一覧</h2></div>

         <div class="wrap">
         <div class="box large">
          <a href="..."><img src="りんごの画像"/>
            <div class="box-text">
              <div class="text">
              <h3 class="white mb-3">りんご</h3>
              <span class="simple_square_btn2">もっと見る</span>
              </div>
            </div>
          </a>
         </div>
           <div class="box large">
            <a href="..."><img src="バナナの画像”/>
              <div class="box-text">
                <div class="text">
                <h3 class="white mb-3">バナナ</h3>
                <span class="simple_square_btn2">もっと見る</span>
                </div>
              </div>
            </a>
           </div>
           <div class="box small">
            <a href="..."><img src="ブドウの画像"/>
              <div class="box-text">
                <div class="text">
                <h3 class="white mb-3">ブドウ</h3>
                <span class="simple_square_btn2">もっと見る</span>
                </div>
              </div>
            </a>
           </div>
           <div class="box small">
            <a href="..."><img src="なしの画像"/>
              <div class="box-text">
                <div class="text">
                <h3 class="white mb-3">なし</h3>
                <span class="simple_square_btn2">もっと見る</span>
              </div>
            </a>
           </div>
          </div>
      　</div>
     </section>

.section-wrapper{
  width: 1146px;
  height: 620.5px;
  background: transparent;
}
.wrap{
	display: flex; 
	justify-content: space-between;
}
.box {
	display: flex;
	flex-wrap: wrap; 
	justify-content: space-between;
	flex-basis: 50%; 
}
.box a {
	flex-basis: calc(100% - 20px); 
	justify-content: center; 
	align-items: center; 
}
.box.small a {
	flex-basis: calc(50% - 10px); 
}
.box.small a:nth-child(n+3) {
	margin-top: 20px;
}

.wrap{
  width: 1146px;
  height: 543px;
  background: transparent;
}

.box.large{
  width: 362px;
  height: 543px;
  position: relative;
/* background: url(...); */
}

.box.small{
  width: 362px;
  height: 256.5px;
  position: relative;
/* background: url(...); */
}

.box a{
  text-decoration: none;
}

.box-text{
  position: absolute;
  background-color: #000000;
  width: 362px;
  height: 150px;
  opacity: 0.8;
}

.text{
  padding: 33px 114px 33px 115px;
}

.text h3{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 36px;
  letter-spacing: 0.05em;
  line-height: 58px;
  text-align: left;
  color: #fff;
}

.text span{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  color: #fff;
}

.simple_square_btn2 {
	display: block;
	position: relative;
	width: 120px;
  height: 32px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
}

Answer 1

<div class="box small"> をさらに <div> で囲むとよいと思います。
デザイン用に div を増やすと CSS が楽に書けることは多いです。
（さらに要素を増やしたりするのか、そのときはどのような並び順にするのか、などがわからないですが、flex layout の代わりに Grid layout を使用したほうがいいこともあります。）

また、

padding: auto;
margin: auto;
z-index: 100;

あたりを使うとすでに書かれた部分も多少楽に書けると思います。

Comments

[shin]

ご回答ありがとうございます。
gridを用いたら上手く配置する事が出来ました。
しかし、画像の上に各テキストを配置出来ません。上の質問を訂正しておりますのでご確認頂けませんでしょうか。

[shin]

すみません。なんとか自力で出来ました。