.vp-blog-info-wrapper {
  .vp-sidebar & {
    // hide blogger info in sidebar
    .vp-blogger-info {
      display: none;
    }
  }

  .vp-page & {
    position: sticky;
    top: calc(var(--navbar-height) + 0.75rem);

    flex: 0 0 300px;

    box-sizing: border-box;
    width: 300px;
    height: auto;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    margin-inline-start: 1rem;

    transition: all 0.3s;

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

    .vp-blogger-info {
      margin-bottom: 16px;
      padding: 8px 0;
      border-radius: 8px;
      box-shadow: 0 1px 3px 1px var(--vp-c-shadow);

      &:hover {
        box-shadow: 0 2px 6px 2px var(--vp-c-shadow);
      }
    }
  }
}