body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ECEFFC;
}

.marker {
  position: relative;
  --marker-radius: 1em;
  --marker-diameter: calc(var(--marker-radius) * 2);
  --marker-color: #eb2f06;

  .pin {
    position: relative;
    z-index: 1;
    width: var(--marker-diameter);
    height: var(--marker-diameter);
    background: var(--marker-color);
    border-radius: 50% 50% 0 50%;
    // Use mask to make a ring which really has a hole.
    mask: radial-gradient(
      transparent calc(var(--marker-radius) / 2),
      grey calc(var(--marker-radius) / 2 + 0.5px),
      black calc(var(--marker-radius) / 2)
    );
    transform: rotate(45deg);
  }

  .shadow {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--marker-radius);
    height: var(--marker-radius);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transform: translate(50%, -10%) rotateX(60deg);

    &::before {
      position: absolute;
      content: "";
      width: var(--marker-diameter);
      height: var(--marker-diameter);
      background: transparent;
      border: 1px solid var(--marker-color);
      border-radius: inherit;
      opacity: 0;
      transform: scale(0);
      animation: pulse 1s infinite;
    }
  }
}

@keyframes pulse {
  50% {
    opacity: 1;
  }

  to {
    transform: scale(1.2);
  }
}
