.hero-carousel{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#efe2d1;
}
.hero-carousel .hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transform:scale(1.015);
  transition:opacity 1.35s ease-in-out,transform 4.8s ease-out;
  will-change:opacity,transform;
}
.hero-carousel .hero-photo.is-active{
  opacity:1;
  transform:scale(1);
}
.hero-progress{
  position:absolute;
  z-index:4;
  right:5vw;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:11px;
}
.hero-progress button{
  width:26px;
  height:3px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.58);
  cursor:pointer;
  transition:width .3s,background .3s;
}
.hero-progress button.is-active{
  width:45px;
  background:#fff;
}
@media(max-width:900px){
  .hero-progress{right:5vw;top:auto;bottom:28px;transform:none;flex-direction:row}
}
@media(prefers-reduced-motion:reduce){
  .hero-carousel .hero-photo{transition:none;transform:none}
}