.sl-tool-hero-art-host {
  position: relative;
  isolation: isolate;
}

.sl-tool-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  color: var(--sl-heading, #163828);
  background: url('../img/breadcrumb/tool-hero-arrow.svg') 48% 57% / clamp(28px, 3.4vw, 52px) auto no-repeat;
}

.sl-tool-detail-hero > .sl-tool-hero-art {
  background-position: 65% 81%;
}

.sl-tool-hero-art::before,
.sl-tool-hero-art::after {
  content: '';
  position: absolute;
  display: block;
  aspect-ratio: 1;
}

.sl-tool-hero-art::before {
  inset: clamp(90px, 12vw, 160px) auto auto clamp(4px, 1.6vw, 28px);
  width: clamp(84px, 13vw, 184px);
  background: url('../img/breadcrumb/icon.png') center / contain no-repeat;
  animation: sl-tool-hero-spin 30s linear infinite;
}

.sl-tool-hero-art::after {
  width: clamp(245px, 44vw, 650px);
  right: max(-270px, -18vw);
  bottom: max(-360px, -26vw);
  border: clamp(34px, 6vw, 106px) solid currentColor;
  border-radius: 50%;
  opacity: .075;
  animation: sl-tool-hero-arc 9s ease-in-out infinite alternate;
}

@keyframes sl-tool-hero-spin {
  to { transform: rotate(1turn); }
}

@keyframes sl-tool-hero-arc {
  to { transform: translate(-18px, -12px); }
}

@media (max-width: 991px) {
  .sl-tool-hero-art { background-image: none; }
  .sl-tool-hero-art::before { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-tool-hero-art::before,
  .sl-tool-hero-art::after { animation: none; }
}