.headshots {
  padding: max(50px, 5%);
  padding-top: max(20px, 2.5%);
  padding-bottom: max(20px, 2.5%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 50%), 1fr));
  justify-items: center;
  gap: 5vw;
}

.headshot-container {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  position: relative;
}

.headshot-image-1, .headshot-image-2, .headshot-image-3, .headshot-image-4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.headshot-image-1 {
  transform: scale(1.2);
  object-position: 40% 30%;
}

.headshot-image-2 {
  transform: scale(1.7);
  object-position: 40% 30%;
}

.headshot-image-3 {
  transform: scale(2.6);
  object-position: 0% -5%;
}

.headshot-image-4 {
  transform: scale(1.5);
  object-position: 0% 65%;
}