.separator {
  position: relative;
  height: 4rem;
}
@media (min-width: 768px) {
  .separator {
    height: 7.5rem;
  }
}
@media (min-width: 992px) {
  .separator {
    height: 15rem;
  }
}
.separator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 200vw;
  height: 12px;
  background-repeat: repeat-x;
  transform: translate(-100vw, -50%);
  animation: wave 10s cubic-bezier(0.25, 0.45, 0.45, 0.25) infinite alternate both;
}
.separator::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 200vw;
  height: calc(50% - 6px);
  transform: translateX(-100vw);
}
.separator--variant1::before {
  background-image: url("../../assets/img/wave-fill--yellow.svg");
}
.separator--variant1::after {
  background-color: var(--color-secondary);
}
.separator--variant2 {
  background-color: var(--color-secondary);
  box-shadow: -50vw 0 var(--color-secondary), 50vw 0 var(--color-secondary);
}
.separator--variant2::before {
  background-image: url("../../assets/img/wave-fill--blue.svg");
}
.separator--variant2::after {
  background-color: var(--color-on-primary);
}

@keyframes wave {
  0% {
    transform: translate(-100vw, -50%);
  }
  25% {
    transform: translate(-95vw, -35%);
  }
  50% {
    transform: translate(-90vw, -45%);
  }
  75% {
    transform: translate(-95vw, -25%);
  }
  100% {
    transform: translate(-100vw, -50%);
  }
}

/*# sourceMappingURL=separator.css.map */