.service-item {
  grid-template-columns: 52px 1fr !important;
}

.service-item span {
  position: relative;
  width: 48px !important;
  height: 48px !important;
  overflow: hidden;
  border: 1px solid rgba(226, 180, 102, 0.78) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.38), transparent 22%),
    radial-gradient(circle at 58% 58%, rgba(226, 180, 102, 0.28), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(226, 180, 102, 0.08) 46%, rgba(5, 5, 5, 0.22)) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 28px rgba(226, 180, 102, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.28) !important;
  clip-path: polygon(24% 0, 100% 0, 100% 66%, 70% 100%, 0 100%, 0 30%);
}

.service-item span::before {
  position: absolute;
  inset: 9px;
  content: '';
  border: 1px solid rgba(255, 255, 255, 0.18);
  clip-path: polygon(24% 0, 100% 0, 100% 66%, 70% 100%, 0 100%, 0 30%);
}

.service-item span::after {
  position: absolute;
  inset: 0;
  content: '';
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.48) 44%, transparent 49%),
    linear-gradient(315deg, transparent 0 58%, rgba(226, 180, 102, 0.36) 60%, transparent 64%);
  opacity: 0.7;
  mix-blend-mode: screen;
}

.service-item:hover span {
  transform: rotate(-6deg) scale(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 42px rgba(226, 180, 102, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.34) !important;
}

@media (max-width: 720px) {
  .service-item {
    grid-template-columns: 40px 1fr !important;
  }

  .service-item span {
    width: 38px !important;
    height: 38px !important;
  }
}