.glow-card {
  position: relative;
  width: 390px;
  height: 300px;
  color: white;
  background: #444;
  border-radius: 14px;
}

.glow-card__bg {
  position: absolute;
  z-index: -1;
  inset: -4px;
  border-radius: 16px;
  overflow: hidden;
}

.blur-layer {
  filter: blur(8px);
  transition: filter 0.3s;
}

.glow-card__bg::before {
  content: '';
  position: absolute;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  min-width: 150%;
  min-height: 150%;
  background-image: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 60%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  animation: spin-glow 4s linear infinite;
  transform-origin: 0% 0%;
  transform: rotate(0deg) translate(-50%, -50%);
}

@keyframes spin-glow {
  from {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  to {
    transform: rotate(360deg) translate(-50%, -50%);
  }
}

.glow-card__content {
  position: relative;
  padding: 14px 16px;
}

.glow-card__image {
  height: 9em;
  width: 9em;
  margin: auto;
  background-color: #fff3;
  border-radius: 1em;
  overflow: hidden;
}

.glow-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1em;
}

.glow-card__content div {
  text-align: center;
}

.glow-card__name {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 1em;
  font-weight: 600;
}

.glow-card__description {
  font-size: 0.75em;
}

.glow-card__description p {
  margin-top: 0.5em;
  padding: 0.5em;
  background-color: #0003;
  border-radius: 1em;
}