.softs-range-hero {
  width: 100%;
  background: #f4f1e9;
}

.softs-range-hero img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.softs-product .ephemeral2-product__bottle {
  width: auto;
  height: min(720px, 74vh);
  max-width: 100%;
  object-fit: contain;
}

.softs-product .ephemeral2-product__content {
  gap: clamp(24px, 3vw, 42px);
}

.softs-product--cola {
  background:
    radial-gradient(circle at 20% 26%, rgba(255, 255, 255, .5), transparent 24%),
    linear-gradient(135deg, #f8d7d2, #d88278 55%, #f4c2ba);
}

.softs-product--ginger {
  background:
    radial-gradient(circle at 75% 34%, rgba(255, 248, 178, .62), transparent 28%),
    linear-gradient(135deg, #edf0bd, #b8c368 55%, #e5d99d);
}

.softs-product--tonic {
  background:
    radial-gradient(circle at 25% 38%, rgba(255, 255, 255, .62), transparent 28%),
    linear-gradient(135deg, #e8e1f2, #a998c2 54%, #d9cce7);
}

.softs-product--limonade {
  background:
    radial-gradient(circle at 74% 35%, rgba(255, 255, 255, .68), transparent 30%),
    linear-gradient(135deg, #dceff3, #80bdca 54%, #c4e5ea);
}

.softs-product--cola .ephemeral2-product__halo {
  background: radial-gradient(circle, rgba(255, 244, 231, .7), rgba(183, 72, 65, .22) 48%, transparent 72%);
}

.softs-product--ginger .ephemeral2-product__halo {
  background: radial-gradient(circle, rgba(255, 255, 219, .72), rgba(154, 171, 65, .2) 48%, transparent 72%);
}

.softs-product--tonic .ephemeral2-product__halo {
  background: radial-gradient(circle, rgba(255, 255, 255, .72), rgba(118, 93, 158, .2) 48%, transparent 72%);
}

.softs-product--limonade .ephemeral2-product__halo {
  background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(54, 145, 164, .2) 48%, transparent 72%);
}

@media (max-width: 900px) {
  .softs-product .ephemeral2-product__bottle {
    height: min(600px, 68vh);
  }
}

@media (max-width: 768px) {
  .softs-range-hero {
    padding-top: 68px;
  }

  .softs-product .ephemeral2-product__bottle {
    height: min(520px, 62vh);
  }
}