member-profile.scss

#member-profile {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  .member-info {
    background-color: $color-0-0-100;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
    margin: 2rem 1rem 5rem 2rem;
    min-height: 100vh;

    .member-bio {

      sib-set-default[name='member-profile__bio'] {
        display: grid;
        grid-gap: 1rem;
        grid-template-areas: "avatar name status"
          "avatar pseudo status"
          "avatar bio status"
          "avatar list button";
        grid-template-columns: 1fr 2fr 1fr;

        sib-set-default[name='member-img'] {
          grid-area: avatar;
          
          member-picture {
            align-items: center;
            background-color: $color-213-20-91;
            border-radius: 50%;
            display: flex;
            height: 28vh;
            justify-content: center;
            overflow: hidden;
            width: 28vh;

            img {
              height: 265px;
              object-fit: cover;
              object-position: center;
              width: 265px;
            }

            object {
              height: 45%;
              width: 45%;
            }
          }

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

        sib-set-default[name='member-profile'] {
          align-items: baseline;
          align-self: end;
          display: flex;
          grid-area: name;

          >sib-multiple[name$='groups'] {
            display: flex;
            padding-left: 1.4rem;
          }
        }

        sib-display-value[name='profile.bio'] {
          grid-area: bio;
        }

        sib-set-default[name='infos'] {
          display: block;
          grid-area: list;

          @extend %member-info;
        }

        member-status[name$='profile.available'] {
          align-self: flex-end;
          color: $color-244-73-62;
          grid-area: status;
          justify-self: flex-end;

          span {
            align-items: center;
            align-self: center;
            display: flex;
            flex-direction: column;
            font-weight: 600;
            line-height: 2;
          }

          span.status-one {
            @include ci('awareness');

            &::before {
              border-bottom: 2px solid $color-43-100-50;
              font-size: 7.3rem;
              padding-bottom: 1.5rem;
            }
          }

          span.status-two {
            @include ci('armor');

            &::before {
              border-bottom: 2px solid $color-43-100-50;
              font-size: 7.3rem;
              padding-bottom: 1.5rem;
            }
          }
        }

        sib-action[name='send'] {
          align-self: flex-end;
          grid-area: button;
          justify-self: flex-end;
        }

        [next=messages] {
          @include icon('speech');
          border: 1px solid $color-244-73-62;
          border-radius: 2em;
          color: $color-244-73-62;
          font-size: 18px;
          font-weight: bold;
          justify-self: end;
          padding: 0.6em 1.5em 0.4em;

          &::before {
            font-size: 25px;
            padding-right: 0.5em;
          }
        }
      }
    }

    .member-skills {

      label {
        float: left;
        font-weight: bold;
        display: block;
        padding-bottom: 0.5rem;
      }
    }
  }
}