.team-picture,
.team-picture *,
.team-picture *::before,
.team-picture *::after {
  box-sizing: border-box;
}

.team-picture {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #fcfcfc;
}

.team-picture__inner {
  width: 100%;
  max-width: 1380px;
  margin-inline: auto;
  padding: 84px 0 62px;
}

.team-picture__stage {
  position: relative;
  width: 100%;
  height: 539px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--team-picture-background, #ded8ca);
}

.team-picture__image,
.team-picture__placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.team-picture__image {
  object-fit: cover;
  object-position: var(--team-picture-image-position, center center);
}

.team-picture__placeholder {
  background: transparent;
}

@keyframes team-picture-reveal {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.team-picture-reveal .team-picture__stage {
  opacity: 0;
}

.team-picture-reveal.is-revealed .team-picture__stage {
  animation: team-picture-reveal 850ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@media (max-width: 1100px) {
  .team-picture__inner {
    width: calc(100% - 60px);
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .team-picture__stage {
    height: auto;
    aspect-ratio: 1380 / 539;
  }

}

@media (max-width: 767px) {
  .team-picture__inner {
    width: calc(100% - 32px);
    padding: 48px 0;
  }

  /* Full-width photo at its natural ratio so nobody gets cropped out;
     the aspect-ratio only sizes the empty placeholder state */
  .team-picture__stage {
    height: auto;
    aspect-ratio: 1380 / 539;
    border-radius: 16px;
  }

  .team-picture__image {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .team-picture-reveal .team-picture__stage {
    opacity: 1;
    animation: none;
  }
}