.iconHR {
  --iconSize: 32px;
  --hrcolor: rgba(128, 128, 128, 0.5);
  --hrbgcolor: transparent;
  --hrgap: 15px;
  --hrweight: 1px;
  --gst: calc(50% - var(--hrgap));
  --gen: calc(50% + var(--hrgap));
  position: relative;
  border-top: 0px;
  height: var(--iconSize);
  opacity: 1;
}

.iconHR::before {
  content: "";
  top: calc(var(--iconSize) / 2);
  position: absolute;
  background: grey;
  background: linear-gradient( 90deg, var(--hrcolor) 0%, var(--hrcolor) var(--gst), var(--hrbgcolor) var(--gst), var(--hrbgcolor) var(--gen), var(--hrcolor) var(--gen), var(--hrcolor) 100% );
  height: var(--hrweight);
  width: 100%;
  display: block;
}

.iconHR::after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="rgb(218,230,230)" class="bi bi-hearts" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015m6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343M7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358"/></svg>');
  display: block;
  width: var(--iconSize);
  height: var(--iconSize);
}

/* unused old css

.iconHR {
  position: relative;
  border-top: 0px;
  height: 32px;
  opacity: 1;
}

.iconHR::before {
  content: "";
  top: 10px;
  position: absolute;
  background: grey;
  height: 1px;
  width: 100%;
  display: block;
}

.iconHR::after {
  position: absolute;
  right: 50%;
  text-align: center;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="var(--bs-warning)" class="bi bi-hearts" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.931.481c1.627-1.671 5.692 1.254 0 5.015-5.692-3.76-1.626-6.686 0-5.015m6.84 1.794c1.084-1.114 3.795.836 0 3.343-3.795-2.507-1.084-4.457 0-3.343M7.84 7.642c2.71-2.786 9.486 2.09 0 8.358-9.487-6.268-2.71-11.144 0-8.358"/></svg>');
  display: block;
  background: white;
  width: 30px;
} */