.user-profile__container {

  .user-bio {
    display: grid;
    grid-gap: 1rem;
    grid-template-areas: "avatar name"
      "avatar information";
    grid-template-columns: minmax(300px, 400px) 2fr;

    .avatar-display {
      grid-area: avatar;
      overflow: hidden;
      position: relative;

      img {
        border-radius: 50%;
        height: 300px;
        object-fit: cover;
        overflow: hidden;
        object-position: center;
        width: 300px;
      }
    }

    .name-diplay {
      grid-area: name;

      [name='user-name-groups'] {
        align-items: baseline;
        align-self: end;
        display: flex;

        sib-multiple {
          display: flex;
          padding-left: 1.4rem;

          hubl-groups-name {
            @extend %tag-role;
          }
        }
      }
    }

    .info-form {
      grid-area: information;

      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
      [name="account.picture"] {
        margin-bottom: 1rem;
      }

      hubl-instruction {
        margin-left: 1rem;

        span {
          color: $color-233-18-29;
          font-weight: bold;
        }

        p {
          margin-left: 1rem;
        }
      }
      /* Fin commentaire sur upload photos */
    }

    [name^="inline-"] {
      display: flex;
      justify-content: flex-start;

      >*:not(:last-child) {
        margin-right: 3rem;
      }
    }
  }
}