.hero-gradient {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #F4FBFF 30%, rgba(255, 255, 255, 0) 100%);
}

.hero-gradient--reverse {
  background: linear-gradient(180deg, #EEF0F0 0%, #FFFFFF 100%);
}

.banner__arc {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  height: auto;
}

.banner__arc--left {
  left: 0;
  top: -120px;
  width: 571px;
  max-height: 468px;
  z-index: 0;
  animation: arc-reveal-ltr 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes arc-reveal-ltr {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

.banner__arc--right {
  right: 0;
  top: -120px;
  width: 981px;
  z-index: 0;
  clip-path: inset(0 0 0 100%);
  animation: arc-reveal-rtl 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}

@keyframes arc-reveal-rtl {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0%); }
}

@media screen and (max-width: 1920px) {
  .banner__arc--left {
    width: 24.7396vw;
  }

  .banner__arc--right {
    width: 48vw;
  }
}

@media screen and (max-width: 1024px) {
  .banner__arc--left {
    width: 28vw;
    left: -80px;
  }
}

@media screen and (max-width: 1023px) {
  .banner__arc--left {
    width: 344px;
    left: 0px;
    top: -64px;
  }

  .banner__arc--right {
    width: 660px;
    right: -256px;
    top: -64px;
  }
}

@media screen and (max-width: 768px) {
  .banner__arc--left {
    width: 258px;
  }

  .banner__arc--right {
    width: 495px;
    right: -192px;
  }
}

@media screen and (max-width: 400px) {
  .banner__arc--left {
    width: 137px;
    top: 0px;
  }

  .banner__arc--right {
    width: 91%;
    right: -9rem;
    top: 5.2rem;
  }
}