<div class="media--wrapper">
  <img src="https://picsum.photos/1240/?random=12" width="1024" alt="" />
</div>
<div class="media--wrapper">
  <video id="video" width="1024" controls>
    <source src="https://sec.ch9.ms/ch9/2662/45582fab-b8ec-4719-8ccc-ff5e8fde2662/EdgeF12Tools_high.mp4">
    <p>
      Your browser doesn't support HTML5 video.
    </p>
  </video>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 30px;
  padding: 30px;
  place-content: center;
}

.media--wrapper {
  box-shadow: inset 0 0 4vmin 3vmin rgb(250 250 0 / 0.5);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  position: relative;
  z-index: -1;
  object-fit: cover;
  object-position: center;
}