.hero-demo {
  display: grid;
  grid-template-columns: minmax(0, .78fr) 34px minmax(0, 1.22fr);
  align-items: center;
  gap: 10px;
}

.hero-demo figure { margin: 0; }

.hero-demo__inputs {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.hero-demo__source { width: 100%; }

.hero-demo__person,
.hero-demo__product,
.hero-demo__result img {
  width: 100%;
  border: 1px solid #e5e0db;
  border-radius: 18px;
  background-color: #eee9e4;
  box-shadow: 0 16px 40px rgba(45, 38, 31, .07);
}

.hero-demo__person {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
  background: #eee9e4;
}

.hero-demo__product {
  aspect-ratio: 2 / 3;
  height: auto;
  object-fit: contain;
  background: #eee9e4;
}

.hero-demo__plus {
  display: grid;
  width: auto;
  height: auto;
  place-items: center;
  background: transparent;
  color: #9b7c55;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
}

.hero-demo__arrow {
  display: grid;
  place-items: center;
  color: #9b7c55;
}

.hero-demo__arrow svg { width: 34px; overflow: visible; }
.hero-demo__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.hero-demo__result img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-color: rgba(196, 168, 130, .65);
}

.hero-demo figcaption {
  margin-top: 6px;
  color: #57534e;
  font-size: .78rem;
  line-height: 1.25;
  text-align: center;
}

.hero-demo__result figcaption span {
  color: #292524;
  font-weight: 650;
}

@media (max-width: 639px) {
  .hero-demo {
    grid-template-columns: minmax(0, .9fr) 24px minmax(0, 1.1fr);
    gap: 6px;
  }
  .hero-demo__inputs { gap: 6px; }
  .hero-demo__person,
  .hero-demo__product,
  .hero-demo__result img { border-radius: 14px; }
  .hero-demo__plus {
    font-size: 1.65rem;
  }
  .hero-demo__arrow svg { width: 24px; }
  .hero-demo figcaption { font-size: .68rem; }
}

.hero-demo__showcase { min-width: 0; }
.hero-demo__choices { display: flex; justify-content: center; gap: 7px; margin-top: 12px; }
.hero-demo__choice { padding: 2px; width: 48px; height: 48px; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }
.hero-demo__choice img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.hero-demo__choice.is-active { border-color: #9b7c55; }
.hero-demo__choice:focus-visible { outline: 2px solid #292524; outline-offset: 2px; }
@media (max-width: 639px) { .hero-demo__choices { gap: 3px; } .hero-demo__choice { width: 38px; height: 38px; } }
.hero-demo__compare { --split: 50%; position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid rgba(196,168,130,.65); border-radius: 18px; background: #eee9e4; box-shadow: 0 16px 40px rgba(45,38,31,.07); }
.hero-demo__compare #hero-result { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border: 0; border-radius: 0; box-shadow: none; transform: scale(1.08); transform-origin: center top; }