画像のサイズ指定と並び替えが上手くいかない

Question

下記参考画像のようなサイズ感・並び方でデザインしたいのですが、どうすればいいでしょうか？

現状のままだと、まったく違ったサイズ感・並び方になってしまっております。
自分の考えでは、imageのwidthを60％と35％くらい(2枚の画像なので6：4の比率)であれば参考画像のようになると思っていたのですが、
まったく違う形になってしまいます。
※heightは300px指定となっています。

またブラウザの幅を収縮・拡大してもサイズ感が変わらないようにしたいです。
何卒ご教授の程お願いいたします。

        <section class="p-contents">
          <div class="p-contents__about">
            <h2 class="p-contents__title">ABOUT</h2>
            <p class="p-contents__description">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit
              est facilis maiores, perspiciatis
            </p>
            <ul class="p-aboutlist">
              <li class="p-aboutlist__photo">
                <img class="p-aboutlist__img" src="./assets/images/about_01.jpeg" alt="気球と風景">
              </li>
              <li class="p-aboutlist__photo">
                <img class="p-aboutlist__img" src="./assets/images/about_02.jpeg" alt="男性と滝">
              </li>
              <li class="p-aboutlist__photo">
                <img class="p-aboutlist__img" src="./assets/images/about_03.jpeg" alt="カヤックの様子">
              </li>
              <li class="p-aboutlist__photo">
                <img class="p-aboutlist__img" src="./assets/images/about_04.jpeg" alt="ラクダとツーショット">
              </li>
            </ul>
          </div>
        </section>

  .p-aboutlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 200px;
  }

  .p-aboutlist .p-aboutlist__photo:nth-child(1) .p-aboutlist__img {
    width: 60%;
    height: 300px;
  }

  .p-aboutlist .p-aboutlist__photo:nth-child(2) .p-aboutlist__img {
    width: 35%;
    height: 300px;
  }

  .p-aboutlist .p-aboutlist__photo:nth-child(3) .p-aboutlist__img {
    width: 35%;
    height: 300px;
  }

  .p-aboutlist .p-aboutlist__photo:nth-child(4) .p-aboutlist__img {
    width: 60%;
    height: 300px;
  }

Answer 1

<percentage> 親となる包含ブロックの幅に対するパーセント値で定義します。

width - CSS: カスケーディングスタイルシート | MDN

となっています。
ご提示のコードの場合、.p-aboutlist .p-aboutlist__photo:nth-child(1) .p-aboutlist__imgの親要素は.p-aboutlist__photoですから、ul要素ではなくてli要素の幅を基準としたパーセンテージ指定になっています。
これは想定とは異なるのではないでしょうか。