.h-card {
  & .hovercard {
    display: none;
    position: absolute;
    z-index: 100;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
    background-color: var(--color-secondary);
    width: fit-content;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    flex-direction: column;
    gap: .5rem;

    & .u-photo {
      max-width: 6rem;
    }

    & .social-icon {
      width: 1rem;
      height: 1rem;
    }
  }

  &:hover {
    & .hovercard {
      display: flex;
      opacity: 1;
    }
  }
}