.hero-bg {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.banner-top,
.new-hero-section,
.grow {
  position: relative;
  z-index: 2;
}

.hero-bg-anim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.shape {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  max-width: none;
  will-change: transform;
  pointer-events: none;
}

.b1 { width: min(160vw, 2000px); }
.b2 { width: min(145vw, 1800px); }
.b3 { width: min(135vw, 1650px); }
.b4 { width: min(125vw, 1550px); }

.s1 { width: min(120vw, 1500px); }
.s2 { width: min(105vw, 1300px); }
.s3 { width: min(90vw, 1100px); }
.s4 { width: min(75vw, 900px); }
.s5 { width: min(60vw, 700px); }

@media (max-width: 767px) {
  .b1 { width: 140vw; }
  .b2 { width: 120vw; }
  .b3 { width: 100vw; }
  .b4 { width: 80vw; }

  .s1 { width: 150vw; }
  .s2 { width: 120vw; }
  .s3 { width: 110vw; }
  .s4 { width: 90vw; }
  .s5 { width: 70w; }

  .shape { top: 42%; }
}