.serviceGrid .service {
  --service-glow-rgb: 169, 126, 242;
  isolation: isolate;
  background:
    radial-gradient(115% 90% at 100% 0%, rgba(var(--service-glow-rgb), 0.075), transparent 58%),
    linear-gradient(145deg, rgba(var(--service-glow-rgb), 0.025), transparent 48%);
  box-shadow:
    inset 0 0 0 1px rgba(var(--service-glow-rgb), 0.025),
    inset 0 0 34px rgba(var(--service-glow-rgb), 0.025);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.serviceGrid .service:nth-child(2),
.serviceGrid .service:nth-child(6) {
  --service-glow-rgb: 132, 151, 224;
}

.serviceGrid .service:nth-child(3),
.serviceGrid .service:nth-child(5) {
  --service-glow-rgb: 183, 144, 204;
}

.serviceGrid .service:nth-child(4) {
  --service-glow-rgb: 148, 126, 194;
}

.serviceGrid .service::before {
  z-index: 0;
  opacity: 0.46;
  background:
    radial-gradient(90% 62% at 100% 0%, rgba(var(--service-glow-rgb), 0.13), transparent 68%),
    radial-gradient(75% 52% at 0% 100%, rgba(var(--service-glow-rgb), 0.055), transparent 72%);
  transition: opacity 0.35s ease;
}

.serviceGrid .service > :not(.serviceBackdropIcon):not(.serviceBackdropEdgeGlow) {
  z-index: 2;
  position: relative;
}

.serviceGrid .service > .serviceBackdropIcon,
.serviceGrid .service > .serviceBackdropEdgeGlow {
  z-index: 1;
  position: absolute;
  top: 50%;
  right: -4%;
  float: none;
  width: clamp(150px, 12vw, 188px);
  height: clamp(150px, 12vw, 188px);
  color: rgb(var(--service-glow-rgb));
  pointer-events: none;
  transform: translateY(-52%) rotate(-7deg) scale(0.96);
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.45s ease;
}

.serviceGrid .service > .serviceBackdropIcon {
  opacity: 0.085;
  filter: drop-shadow(0 0 24px rgba(var(--service-glow-rgb), 0.34));
}

.serviceGrid .service > .serviceBackdropEdgeGlow {
  clip-path: inset(0 0 0 54%);
  opacity: 0.22;
  mix-blend-mode: screen;
  filter:
    drop-shadow(6px 0 6px rgba(var(--service-glow-rgb), 0.82))
    drop-shadow(17px 0 20px rgba(var(--service-glow-rgb), 0.54))
    drop-shadow(30px 0 32px rgba(var(--service-glow-rgb), 0.3));
}

@media (hover: hover) and (pointer: fine) {
  .serviceGrid .service:hover {
    background:
      radial-gradient(115% 90% at 100% 0%, rgba(var(--service-glow-rgb), 0.115), transparent 60%),
      linear-gradient(145deg, rgba(var(--service-glow-rgb), 0.045), transparent 52%);
    border-color: rgba(var(--service-glow-rgb), 0.2);
    box-shadow:
      inset 0 0 0 1px rgba(var(--service-glow-rgb), 0.05),
      inset 0 0 42px rgba(var(--service-glow-rgb), 0.045);
  }

  .serviceGrid .service:hover::before {
    opacity: 0.82;
  }

  .serviceGrid .service:hover > .serviceBackdropIcon {
    opacity: 0.135;
    filter: drop-shadow(0 0 32px rgba(var(--service-glow-rgb), 0.48));
    transform: translateY(-52%) rotate(-4deg) scale(1);
  }

  .serviceGrid .service:hover > .serviceBackdropEdgeGlow {
    opacity: 0.32;
    filter:
      drop-shadow(7px 0 8px rgba(var(--service-glow-rgb), 0.82))
      drop-shadow(19px 0 24px rgba(var(--service-glow-rgb), 0.56))
      drop-shadow(34px 0 38px rgba(var(--service-glow-rgb), 0.3));
    transform: translateY(-52%) rotate(-4deg) scale(1);
  }
}

@media (max-width: 760px) {
  .serviceGrid .service > .serviceBackdropIcon,
  .serviceGrid .service > .serviceBackdropEdgeGlow {
    right: -22px;
    width: 148px;
    height: 148px;
  }

  .serviceGrid .service > .serviceBackdropIcon {
    opacity: 0.07;
  }

  .serviceGrid .service > .serviceBackdropEdgeGlow {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .serviceGrid .service,
  .serviceGrid .service::before,
  .serviceGrid .service > .serviceBackdropIcon,
  .serviceGrid .service > .serviceBackdropEdgeGlow {
    transition: none;
  }
}