.user-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing);
  align-items: center;
}

@media screen and (min-width: 768px) {
  .user-contact {
    flex-wrap: nowrap;
  }
}

.user-contact__image {
  width: 140px;
}

.user-contact__image img {
  border-radius: var(--border-radius-full);
}

.user-contact__name {
  display: flex;
  gap: var(--spacing-xxsmall);
}

.user-contact__contact {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-contact__contact a {
  display: inline-block;
  padding: var(--spacing);
  text-decoration: none;
  color: var(--color-white);
  border-radius: var(--border-radius-full);
  background-color: var(--color-primary-b);
}

.user-contact__contact svg path {
  fill: var(--color-white);
}

.user-contact__contact a:focus svg path,
.user-contact__contact a:hover svg path {
  fill: var(--color-secondary-a);
}