.mapa-clenu {
  --_theme-color: #377dff;
  --_white: #fff;

  display: flex;
  flex-flow: row nowrap;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  margin-inline: 1rem;

  span {
    display: inline-block;
    color: var(--_white);
    font-size: 30px;
    transition: color 300ms;
    background-image: linear-gradient(
      to right,
      var(--_theme-color),
      var(--_theme-color)
    );
    background-repeat: no-repeat;
    background-position-x: -50%;
    background-position-y: 100%;
    background-size: 0 2px;
  }

  svg {
    --_border-1: var(--_white);
    --_border-2: var(--_theme-color);
    width: 70px;
    height: auto;
    stroke-dashoffset: -363;
  }

  &:hover {
    span {
      color: var(--_theme-color);
      background-size: 100% 3px;
      transition:
        color 300ms,
        background-size 300ms 300ms;

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
    svg {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset 450ms;

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
  }
}