.user-profile {
  --first-gen-badge-width: 150px;

  display: grid;
  grid-template-areas:
    "picture"
    "info"
    "bio"
    "other";
  grid-template-columns: 1fr;
  gap: 1em;
}

.user-profile__user-info {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-area: info;
  justify-content: flex-start;
  margin-right: calc(var(--first-gen-badge-width) + 10px);
  padding: 0 !important;
  gap: 1em;
}

.user-profile__user-info > div > div:nth-of-type(1) {
  float: left;
  padding-right: 10px;
  font-weight: bold;
}

.user-profile__first-gen {
  position: absolute;
  right: calc((var(--first-gen-badge-width) + 10px) * -1);
  width: var(--first-gen-badge-width);
  margin: 0 !important;
}

.user-profile__bio {
  grid-area: bio;
}

.user-profile__picture {
  overflow: hidden;
  grid-area: picture;
  border-radius: 0.5rem;
}

.user-profile__picture img {
  width: 100%;
  max-width: initial !important;
  height: auto;
  padding: 0 !important;
}

.user-profile__other-information {
  grid-area: other;
}

@media screen and (min-width: 751px) {
  .user-profile {
    grid-template-areas:
      "info picture"
      "bio picture"
      "other other";
    grid-template-columns: 2fr 1fr;
  }

  .user-profile__picture {
    max-width: 360px;
  }
}