/* Profile — avatar with artwork-coloured ring, name, tagline, bio */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The ring is the padding; the image's own border is the gap between ring and photo */
.profile__avatar-ring {
  padding: 3px;
  border-radius: 50%;
  background: conic-gradient(var(--orange), var(--teal), var(--orange));
}
.profile__avatar {
  width: 104px;
  height: 104px;
  border: 4px solid var(--bg);
  border-radius: 50%;
  object-fit: cover;
}

.profile__name {
  margin-top: var(--space-3);
}
.profile__tagline {
  margin-top: var(--space-2);
}
.profile__bio {
  max-width: 42ch;
  margin-top: var(--space-4);
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 640px) {
  .profile__avatar {
    width: 120px;
    height: 120px;
  }
}