.kit-composition,
:where(.product-visual) .kit-thumb {
  --large-center: 33%;
  --small-center: 66%;
  --soap-center: 71%;
  --large-size: 82%;
  --small-size: 53%;
  --soap-size: 56%;
}

.composition-kit-signature {
  --large-center: 25%;
  --small-center: 51%;
  --soap-center: 76%;
  --large-size: 80%;
  --small-size: 47%;
  --soap-size: 48%;
}

.composition-kit-encanto {
  --large-center: 30%;
  --soap-center: 69%;
  --soap-size: 60%;
}

.composition-kit-mini-encanto {
  --small-center: 29%;
  --soap-center: 68%;
  --small-size: 63%;
  --soap-size: 58%;
}

.kit-composition::before,
.kit-thumb::before {
  content: "";
  position: absolute;
  inset: auto 10% 3%;
  height: 15%;
  background: radial-gradient(ellipse at center, #0008, transparent 70%);
  pointer-events: none;
}

.product-visual .kit-thumb > .sprite:not(.mini):not(.soap),
.kit-art.kit-composition > .sprite.kit-big {
  width: var(--large-size);
  left: calc(var(--large-center) - var(--large-size) / 2);
  bottom: 9%;
}

.product-visual .kit-thumb > .sprite.mini,
.kit-art.kit-composition > .sprite.kit-mini {
  width: var(--small-size);
  left: calc(var(--small-center) - var(--small-size) / 2);
  right: auto !important;
  bottom: 9%;
}

.product-visual .kit-thumb > .sprite.soap,
.kit-art.kit-composition > .sprite.kit-soap {
  width: var(--soap-size);
  left: calc(var(--soap-center) - var(--soap-size) / 2);
  right: auto;
  bottom: 9%;
}

.sprite:is(.luna, .red, .flowers, .bamboo) {
  background-size: contain;
  background-position: center;
}

.sprite.luna { background-image: url('assets/luna-500-estudio.webp'); }
.sprite.red { background-image: url('assets/red-velvet-500-estudio.webp'); }

.sprite.flowers { background-image: url('assets/flowers-500-estudio.webp'); }
.sprite.bamboo { background-image: url('assets/bamboo-500-estudio.webp'); }