#profile-picture-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
}

#profile-picture {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  object-fit: cover;
  display: block;
}

@media (min-width: 501px) {
  #profile-picture-container {
    flex-direction: row; /* side-by-side layout */
    align-items: center; /* center items in column layout */
  }

  #profile-picture {
    width: 33.33%;
    flex: 2 0.5 200px; /* allow it to grow */
    max-width: 200px;
    margin-right: 20px; /* space between image and text */
  }

  #profile-text {
    flex: 1 1 400px; /* take up remaining space */
  }
}

@media (max-width: 500px) {
  #profile-picture {
    width: 100%;
  }

  #profile-text {
    width: 100%;
  }
}