hubl/src/styles/members.scss

#profiles-list {
  @extend .grid-layer;

  nav {
    align-items: center;
    display: flex;
    font-size: 2.4rem;
    justify-content: center;

    button {
      color: $color-anti-flash-white;
      
      &:before {
        color: $color-dark-lava;
        @include icon('arrow-left-circle');
      }

      &:disabled::before {
        color: $color-manatee;
      }
    }

    button:nth-of-type(2) {
      order: 1;
      transform: rotate(180deg);
    }

    span {
      font-size: 2.6rem;
    }
  }

  & > sib-form {
    grid-column-start: start;
    grid-column-end: middle;
    grid-row-start: start;
    grid-row-end: middle;
  }

  & > div,
  & > nav {
    display: flex;
    flex-wrap: wrap;
    grid-column-start: start;
    grid-column-end: end;
    margin-bottom: 1.7rem;
  }
  
  & > div {
    justify-content: space-between;

    &:first-of-type {
      color: $color-quartz;
      font-weight: bold;
      justify-content: center;
      margin-bottom: 3.75rem;
      white-space: nowrap;
      
      &::before, &::after {
        border-top: 1px solid $color-timberwolf;
        content: '';
        position: relative;
        top: 0.85rem;
        width: 35.2vw;
      }

      &::before {
        right: 5.1rem;
      }

      &::after {
        left: 5.1rem;
      }
    }

    > sib-display {
      background-color: white;
      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
      color: $color-rolling-stone;
      cursor: pointer;
      display: flex;
      flex-flow: column wrap;
      margin-bottom: 2.5rem;
      padding-bottom: 10rem;
      @media(min-width: 56rem) {
        height: 62rem;
        width: 32%;
      }

      label {
        display: none;
      }

      div[name='header'] {
        border-bottom: 1px solid $color-anti-flash-white;
        display: flex;
        flex-direction: column;
        padding: 0.85rem 0 3.4rem;

        > *:not(sib-display-img) {
          display: flex;
          flex-basis: content;
          justify-content: center;
        }

        sib-display-img {
          background-color: white;
          border-radius: 50%;
          height: 28vh;
          margin: 1.7rem auto;
          overflow: hidden;
          position: relative;
          width: 28vh;


          img {
            height: 100%;
            left: 0;
            object-fit: cover;
            position: absolute;
            top: 0;
            width: 100%;
          }
        }

        ul[name='user'] {
          font-weight: bold;
          margin: 0;
          @extend h1;
        }

        sib-display-div[name$='bio'] {
          display: flex;
          flex-basis: 3.5em;
          line-height: 1.6;
          margin: 2.5rem 0;
          padding: 0 6.8rem;
          text-align: center;
        }
        
        [next=member-chat] {
          align-self: center;
          border: 1px solid $color-majorelle-blue;
          border-radius: 3.4rem;
          color: $color-majorelle-blue;
          font-size: 1.8rem;
          font-weight: bold;
          padding: 1rem 2.55rem 0.7rem;
          @include icon('speech');
  
          &::before {
            font-size: 2.5rem;
            padding-right: 0.85rem;
          }
        }
      }
      
      div[name='infos'] {

        > sib-display-div > div,
        > sib-display-lookuplist > ul {
          margin-bottom: 0;
          margin-top: 1.7rem;

          &::before {
            color: $color-selective-yellow;
            font-size: 2rem;
            padding: 0 0.6em 0 1em;
          }
        }

        > sib-display-lookuplist[name$='groups'] > ul > li {
          border: none;
          font-size: inherit;
          margin-left: 0;
          padding: 0;
        }

        > sib-display-lookuplist[name$='skills'] > ul {
          margin-left: 1.7rem;
        }
        
        [name$='city'] * {
          @include mdi('atom');
        }

        ul[name*='groups'] {
          @include mdi('account-outline');
        }

        [name$='email'] * {
          @include icon('envelope');
        }

        [name$='phone'] * {
          @include icon('phone');
        }
      }
    }
  }
}