/** { box-sizing: border-box; }*/

.patient-stories-container {
    margin: 0 15px;
}

.patient-stories {
  --page: round(down, calc(var(--c) / 2));
  --clamped-first: clamp(0,var(--c), 1);
  --left-translate: calc(var(--clamped-first) * (100% - mod(var(--c), 2) * 100%));
  display: flex;
  margin: auto;
  max-width: var(--container-width);
  /*1* let pointer event go trough pages of lower Z than .book */
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: var(--left-translate) 0%;
  /* DEMO ONLY: incline on the X axis for pages preview */
  rotate: 1 0 0 20deg;
}

@media only screen and (min-width: 1000px) {
    .patient-stories {
        --page: var(--c);
        --left-translate: calc(min(var(--c), 1) * 50%);
    }
}

.patient-story-page {
  --thickness: 2;
  /* PS: Don't go below thickness 0.4 or the pages might transpare */
  flex: none;
  display: flex;
  width: 100%;
  /*1* allow pointer events on pages */
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  border: 2px solid var(--border-color, #BE8F3C);
  transform-origin: left center;
  transition:
    transform 1s,
    rotate 1s ease-in calc((min(var(--i), var(--page)) - max(var(--i), var(--page))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ( calc((var(--page) - var(--i) - 0.5) * calc(var(--thickness) * 1px)));
  rotate: 0 1 0 calc(clamp(0, var(--page) - var(--i), 1) * -180deg);
}

.patient-story-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.front,
.back {
  flex: none;
  width: 100%;
  padding: 2rem;
  backface-visibility: hidden;
  background-color: var(--background-color1);
  /* Fix backface visibility Firefox: */
  translate: 0px;
}

.back {
  background-image: linear-gradient(to right, var(--background-color1) 80%,  var(--background-color2) 100%);
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}