@media (max-width: 860px) {

  .profile-block,
  .quick-links,
  .video-block,
  .note-block,
  .contact-block {
    grid-column: 1 / -1;
  }

  .profile-block {
    align-items: flex-start;

    flex-direction: column;
  }

  .bookmark-tip {
    position: static;

    display: block;

    margin:
      18px
      16px
      0
      auto;
  }
}

@media (max-width: 560px) {

  .topbar {
    padding: 14px 16px;
  }

  .brand-name {
    display: none;
  }

  .hero {
    min-height: 280px;

    padding-top: 60px;
  }

  .block {
    border-radius: 20px;

    padding: 20px;
  }

  .block-picker,
  .contact-actions {
    grid-template-columns: 1fr;
  }

  .link-grid a {
    min-height: 62px;
  }
}