page-grid {

  ion-col {

    &.profile {
      background-size: cover;
      border: 1px solid #000000;
      box-sizing: border-box;
      padding: 0 0 33% !important;
      position: relative;

      .username {
        bottom: 0.25rem;
        box-sizing: border-box;
        color: #acacac;
        display: inline-block;
        left: 0.5rem;
        overflow: hidden;
        position: absolute;
        right: 0.25rem;
        text-overflow: ellipsis;
        text-shadow: rgba(0, 0, 0, 1);
        white-space: nowrap;

        &::before {
          border: 0.125rem solid #acacac;
          border-radius: 1rem;
          bottom: 0.125rem;
          content: '';
          display: inline-block;
          height: 0.8rem;
          margin-right: 0.5rem;
          position: relative;
          vertical-align: middle;
          width: 0.8rem;
        }

        &.online {

          &::before {
            background-color: #00FF00;
            border-color: #00FF00;
          }
        }
      }
    }
  }
}