/* Reuse the existing gallery and vial composition in their new positions. */
.hero .hero-comparison {
  position: relative;
  top: auto;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  padding-inline: 10px;
}
.hero-comparison .story-photo-shell {
  --photo-max-height: clamp(400px, calc(100svh - 310px), 620px);
}
.hero-comparison .comparison-help { font-size: 11px; }
.comparison-note {
  max-width: 420px;
  margin: 8px auto 0;
  color: #6d7f98;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}
#story .story-products {
  position: sticky;
  top: var(--header-offset, 100px);
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 470px;
  height: 540px;
  margin: 0;
}
.story-products .hero-main-vial { left: 17%; top: 5%; width: 68%; }
.story-products .hero-mini-left { left: -2%; top: 36%; width: 41%; }
.story-products .hero-mini-right { right: -2%; top: 49%; width: 40%; }
.story-products .viva-quality { left: 0; top: 14%; }
.story-products .viva-hero-product { left: 7%; bottom: 0; width: 86%; }
@media (max-width: 960px) {
  .hero .hero-comparison { max-width: 480px; margin-top: 8px; }
  .hero-comparison .story-photo-shell {
    --photo-max-height: clamp(420px, calc(100svh - 240px), 620px);
  }
  #story .story-products {
    position: relative;
    top: auto;
    height: clamp(330px, 105vw, 480px);
  }
}
@media (max-width: 639px) {
  .hero-comparison .comparison-help { font-size: 12px; }
  .comparison-note { font-size: 10px; }
}