/* Keep the top of staff photographs visible at every responsive breakpoint. */
.home-work-photos .home-work-photo {
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: 50% 0%
}

/* Use complete portrait photographs so both faces and working hands remain visible. */
.home-work-photos .home-work-photo-one,
.home-work-photos .home-work-photo-three {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center
}

.home-work-photos .home-work-photo-one {
  width: 42%;
  left: 0;
  top: 426px
}

.home-work-photos .home-work-photo-three {
  width: 46%;
  left: 48%;
  top: 500px
}

.home-work-photos {
  height: 930px
}

@media(min-width:761px) and (max-width:1000px) {
  .home-work-photos {
    height: 820px
  }
  .home-work-photos .home-work-photo-one {
    top: 360px
  }
  .home-work-photos .home-work-photo-three {
    top: 430px
  }
}

@media(max-width:760px) {
  .home-work-photos {
    height: calc(230px + (100vw - 44px)*.69);
    max-height: none
  }
  .home-work-photos .home-work-photo-one {
    width: 42%;
    left: 0;
    top: 120px
  }
  .home-work-photos .home-work-photo-three {
    width: 46%;
    left: 50%;
    top: 210px
  }
}

@media(min-width:761px) {
  .home-work-photos {
    height: 760px
  }
  .home-work-photos .home-work-photo-one {
    top: 326px
  }
  .home-work-photos .home-work-photo-two {
    top: 109px
  }
  .home-work-photos .home-work-photo-three {
    top: 400px
  }
  .home-work {
    padding-bottom: 60px
  }
  .home-work-photo.photo-float-ready {
    opacity: 0;
    translate: 0 24px
  }
  .home-work-photo.photo-float-ready.is-visible {
    animation: work-photo-enter .95s var(--photo-delay,0ms) ease both,work-photo-drift 6s calc(var(--photo-delay,0ms) + .95s) ease-in-out infinite
  }
}

@media(min-width:761px) and (max-width:1000px) {
  .home-work-photos {
    height: 650px
  }
  .home-work-photos .home-work-photo-one {
    top: 260px
  }
  .home-work-photos .home-work-photo-three {
    top: 330px
  }
}

@keyframes work-photo-enter {
  from {
    opacity: 0;
    translate: 0 24px
  }
  to {
    opacity: 1;
    translate: 0 0
  }
}

@keyframes work-photo-drift {
  0%,100% {
    translate: 0 0
  }
  50% {
    translate: 0 -10px
  }
}

@media(prefers-reduced-motion:reduce) {
  .home-work-photo.photo-float-ready {
    opacity: 1;
    translate: none;
    animation: none!important
  }
}