.panel--decor,
.service-hero--decor {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.panel--decor > *,
.service-hero--decor > * {
  position: relative;
  z-index: 1;
}

.decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: .9;
  animation: decor-float 9s var(--ease-out) infinite alternate;
}

.decor--sm {
  width: 84px;
}

.decor--md {
  width: 132px;
}

.decor--lg {
  width: 190px;
}

.decor--top-right {
  top: 18px;
  right: 26px;
}

.decor--top-left {
  top: 20px;
  left: 18px;
}

.decor--bottom-right {
  right: 22px;
  bottom: 20px;
}

.decor--bottom-left {
  left: 20px;
  bottom: 18px;
}

.decor--left {
  top: 44%;
  left: -34px;
}

.decor--right {
  top: 38%;
  right: 12px;
}

.decor--top-center {
  top: 14px;
  left: 46%;
}

.decor--bottom-center {
  bottom: -18px;
  left: 38%;
}

.decor--soft {
  opacity: .5;
}

.decor--faint {
  opacity: .22;
}

.decor--slow {
  animation-duration: 13s;
}

@keyframes decor-float {
  from {
    transform: translateY(-6px) rotate(-2deg);
  }
  to {
    transform: translateY(6px) rotate(2deg);
  }
}

@media (max-width: 768px) {
  .decor--md,
  .decor--lg {
    width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .decor {
    animation: none;
  }
}

@media (max-width: 900px) {
  .decor--sm {
    width: 62px;
  }

  .decor--md {
    width: 88px;
  }

  .decor--lg {
    width: 120px;
  }

  .decor--left,
  .decor--bottom-left {
    display: none;
  }
}

@media (max-width: 640px) {
  .decor {
    display: none;
  }
}