@use "@sass-palette/hope-config";
.vp-blogger-info {
  padding: 0.5rem;
  font-family: var(--vp-font-heading);
  overflow-wrap: break-word;

  .vp-page & {
    background: var(--vp-c-bg-elv);
  }

  .vp-sidebar &.mobile {
    display: none;

    @media (max-width: hope-config.$tablet) {
      display: block;
    }

    + hr {
      display: none;

      @media (max-width: hope-config.$tablet) {
        display: block;
        margin-top: 1rem;
      }
    }
  }
}

.vp-blogger {
  padding: 0.5rem;
  text-align: center;

  &[role="link"] {
    cursor: pointer;
  }
}

.vp-blogger-avatar {
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
}

.vp-blogger-name {
  margin: 1rem auto;
  font-size: 22px;
}

.vp-blogger-description {
  margin: 1rem auto;
  font-size: 14px;
}

.vp-blog-counts {
  display: flex;
  justify-content: space-evenly;
  width: 80%;
  margin: 0 auto 1rem;
}

.vp-blog-count {
  display: block;

  color: inherit;

  font-size: 13px;
  text-align: center;

  cursor: pointer;

  transition: color var(--vp-t-color);

  &:hover {
    color: var(--vp-c-accent);
  }

  .count {
    position: relative;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 20px;
  }
}