<div id="container">
  <div class="card">
    <img id="image-1" src="https://images.unsplash.com/photo-1614468501113-af38115bdcd1?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=1000" alt="A picture of a man's face" />
  </div>
  <div class="card">
    <img id="image-2" src="https://images.unsplash.com/photo-1614487157426-3f81c774d9e3?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=1000" alt="A picture of a woman's face" />
  </div>
  <div class="card">
    <img id="image-3" src="https://images.unsplash.com/photo-1614557515497-5df0f184562f?crop=entropy&cs=srgb&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=85&w=900" alt="A picture of a woman's face" />
  </div>
  <div class="card">
    <img id="image-4" src="https://images.unsplash.com/photo-1614416298967-9135825616af?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=1300" alt="A picture of a man's face" />
  </div>
</div>

#container {
  margin: 0 auto;
  width: 80ch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card {
  width: 35ch;
  height: 35ch;
  border: 2ch solid #1565c0;
  overflow: hidden;
}

img {
  display: block;
  object-fit: none;
}

#image-1 {
  object-position: -275px -260px;
}

#image-2 {
  object-position: -620px -330px;
}

#image-3 {
  object-position: -210px -500px;
}

#image-4 {
  object-position: -680px -770px;
}