display:flexで正方形維持

模写コーディング続き レスポンシブで正方形維持するのはどうやってやるんや？？ となったが ↓のサイト参考にしたらできましたー！

web-no-hito.com

    &__movie {
      display: flex;
      &Item {
        width: 50%;
        position: relative;
        &:before {
          content: "";
          display: block;
          padding-top: 100%; 
        }
        &1 {
          margin-right: 6px;
        }
        &2 {
          margin-left: 6px;
        }
      }
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
      }
    }

擬似要素でpadding-top: 100%にするのがミソみたい・・・