:root {
  --avatar-size: 16rem;
}

.avatar__wrapper {
  width: 100%;
  justify-content: center;
  margin-bottom: 1rem;
}

.avatar__wrapper img {
  border-radius: var(--rounded-full);
  border: 1px solid var(--accent-color);
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 1rem;
  background-color: var(--color-lightest);
}

@media screen and (min-width: 768px) {
  :root {
    --avatar-size: 24rem;
  }
}