Im trying to duplicate something like what is shown in the video. I have 2 blocks of div. One containing a random image and another a video and im trying to make them flexible and identical as possible to the video. How can I approach this?

I tried using flex box to align them horizontally then media query them to go vertically when the width of window is smaller. However I cannot get it to shrink like the one in the video.

Html code im not gonna upload because its just a container div with image and video div inside it.

```
Here is my css : 

.container {
  max-width: 1400px;
  display: flex;
  justify-content: center;
}

.image {
  height: 45vh;
  width: 70vh;
}

.video {
  height: 45vh;
  width: 70vh;
}

@media screen and (max-width: 768px) {
  .container {
    flex-wrap: wrap;
  }

}

```