hubl/src/scss/_member.scss

%detail-section {
  font-weight: bold;
  font-size: 18px;
}

#member-chat {
  #conversejs {
    margin: none;
  }
}

#profiles-list,
#member-info {
  img {
    display: block;
  }

  &,
  img {
    width: 100%;
  }

  div[name='name'] {
    @extend %detail-section;
    padding-top: 10px;
  }

  div[name='name'],
  div[name='location'] {
    display: flex;
  }
}

#member-detail {
  #member-info {
    sib-display-mailto,
    sib-display-tel {
      display: block;
    }

    a[name='email'],
    a[name='number'] {
      &::before {
        font-family: FontAwesome;
        padding-right: 4px;
        color: black;
      }
    }
    a[name='email'] {
      &::before {
        content: '\f0e0';
      }
    }
    a[name='number'] {
      &::before {
        content: '\f10b';
        font-size: 22px;
        padding-left: 3px;
        padding-right: 7px;
      }
    }
  }

  .section {
    position: relative;

    h2 {
      @extend %detail-section;
      margin-top: 40px;
    }
  }

  #member-skills {
    display: flex;
    flex-wrap: wrap;

    sib-display {
      display: block;
      background-color: $hd-color;
      color: white;
      border-radius: 100px;
      padding: 3px 10px;
      margin-bottom: 5px;
      margin-right: 5px;
    }
  }
}

@media (min-width: $sm-with) {
  #member-detail {
    #member-info {
      sib-display-img {
        display: block;
        float: right;
        width: 300px;
      }
    }
  }
}

#member-info {
  @extend %member;
}

.members-list-condensed{
  display: block;
  img{
    width: 50px;
    height: 50px;
    border-radius: 100%;
    object-fit: cover;
    object-position: top;
  }
  label{
    display: none;
  }
  >div>sib-display>div{
    display: flex;
  }
  ul{
    padding-left: 1em;
  }
}