* {
  margin: 0;
}

body {
  overflow-x: hidden;
}

.container-photo {
  --n: 1;
  display: flex;
  align-items: center;
  overflow-y: hidden;
  width: 100%;
  width: calc(var(--n)*100%);
  max-height: 100vh;
  transform: translate(calc(var(--tx, 0px) + var(--i, 0)/var(--n)*-100%));
}
.container-photo img {
  width: 100%;
  width: calc(100%/var(--n));
  user-select: none;
  pointer-events: none;
}

.smooth {
  transition: transform calc(var(--f, 1)*.5s) ease-out;
}